vue 路由基礎
vue 使用 vue-router 插件處理路由，路由是開發單頁應用必須掌握的知識。
什麼是 vue-router？
（1）vue-router 是 Vue 官方提供前端路由插件，藉助它我們實現可以基於路由和組件的單頁面應用。
（2）它與傳統的頁面區別在於：
- 傳統的頁面應用採用的是
後端路由，即通過超鏈接來實現頁面切換和跳轉的。 - 而在 vue-router 單頁面應用中，則是通過路徑之間的切換（實際上就是組件的切換）。
router-link 和 router-view 組件
router-link 是一個a（鏈接）標籤的封裝，router-view 是路由視圖，渲染 router-link 匹配到的組件，可配合使用<transition> 和 <keep-alive> 使用。
路由配置
動態路由
$route 是當前路由，可用 watch在組件中監它的變化，有一個 params 屬性，值一個包含動態路由的對象。
watch: {
'$route'(to) {
console.log(to);
//將路由的 params 屬性賦值給組件的 data 屬性
to.params && to.params.view && (this.effect = to.params.view)
},
}路由對象爲：
{
path:'/argu/:name',
// 使用 import 動態引入路徑對應的組件，起到懶加載的作用
component:()=>import('@/views/ArguPage')
}可在該路由的組件中這樣獲取name的值：
$route.params.name //給同一個組件設置傳遞不同的params，實現組件的複用嵌套路由
在路由對象中添加一個 children 屬性，值是一個數組，可包含多個子路由。子路由 path 前面不能有 / 。 父級路由對應的組件必須有路由出口，即 router-view。
命名路由
路由對象中的 name 屬性是路由的名字，可用該名字指定路徑。
在 router-link 的 to 屬性動態綁定 路由對象。
<router-link :to="{name:'home'}"></router-link>命名視圖
route-view 是路由視圖，只有一個視圖時，路由匹配的組件在該視圖中渲染，多個視圖則要對視圖進行命名。
<!-- 視圖渲染組件,該組件內不需要房子任何內容，可寫成只閉合標籤-->
<router-view />
<!-- 有多個路由視圖需要匹配，則用命名視圖 -->
<router-view name="sister"></router-view>
<router-view name="brother"></router-view>路由對象：
{
path:'/name/view',
name:'name_view',
// 注意命名視圖的 components 和 組件的 component 的區別
components:{
// 不給 router-view 設置 name 屬性，name 值就是 default
default:()=>import('@/views/ChildPage'),
sister:()=>import('@/views/SisterPage'),
brother:()=>import('@/views/BrotherPage'),
}
}JS 操作路由
路由對象 $router 有多個函數push 、 go 、 replace
push 可導航到不同的頁面，會將該路徑進入歷史記錄。$router.push 和 window.history.pushSate 一樣。
push 可接受不同的參數：
//字符串路徑
this.$router.push('home')
// 路由對象
this.$router.push({path:'home'})
// 命名路由加參數
this.$router.push({name:'argu',params:{name:'jack'}})
// path 路由和 query
this.$router.push({path:'argu',query:{name:'jack'}});
// path 和 params 不可一起使用，params 會被忽略
this.$router.push({path:'argu',params:{name:'jack'}});
this.$router.push({name:'argu',query:{name:'jack'}});
go 的參數是一個整數，表示回退或者前進多少歷史記錄。
// 在瀏覽器記錄中前進一步，等同於 history.forward()
$router.go(1)
// 後退一步記錄，等同於 history.back()
$router.go(-1)
// 前進 3 步記錄
$router.go(3)
// 如果 history 記錄不夠用，那就默默地失敗唄
$router.go(-100)
$router.go(100)router.replace(location) = window.history.replaceState
跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
使用場景：不需要用戶回退的情況，比如權限驗證。
// 路由名字
this.$router.replace('name_view');
// 字符串路徑
this.$router.replace('/name/view');
// 路由對象
this.$router.replace({path:'/name/view'});
// 命名路由帶 params
this.$router.replace({name:'name_view',params:{age:24}});
// path 和 query
this.$router.replace({path:'name_view',query:{age:24}});
// this.$router.replace({path:'/name/view',params:{age:24}});重定向和別名
// 路由重定向:訪問 /index ，重定向到 /
{
path:'/index',
redirect:'/'
}redirect 也可設置一個對象：
{
path:'/index',
redirect:{
name:'home'
}
}redirect 還可以設置爲一個函數，傳遞一個參數 to,可根據該對象的不同值，重定向到不同的頁面，返回一個 命名路由 或者 字符串路徑 。
{
path:'/index',
redirect:to=>{
// do something with to
return {
name:'home'
}
}
}to 是一個包含路徑參數的對象：
{
name: "index",
meta: {},// 路由元數據，可在全局導航守衛中獲取該對象，然後不同頁面設置不同的值，比如設置頁面的標題
path: "/index", // 路由路徑 解析爲絕對路徑 /a/b
hash: "", // 書籤
query: {}, // 查詢參數 /a?user=jack, $route.query.uer 的值爲 jack
params: {}, //
fullPath: "/index", // 完整路徑
matched: [{ // 當前路由的所有嵌套路徑片段的路由記錄,路由記錄就是路由的副本。
path: "/index",
regex: {
keys: []
},
components: {},
instances: {},
name: "index",
meta: {},
props: {}
}],
redirectedForm:''// 重定向來源的名字
}router.beforeEach((to, from, next) => {
console.log('①，全局前置守衛,beforeEach');
//給每個頁面設置不同的標題，標題就從 meta 中獲取
//setTitle = (title)=>{
// window.document.title=title||'admin'
//}
to.meta && setTitle(to.meta.title);
next(()=>{
console.log('②，全局前置守衛,beforeEach');
});
});路徑別名
{
name: 'home',
alias:'home_page',// 路徑別名
path: '/',
component: Home
}