vue router筆記
注意點
- router-link預設轉成a標籤，添加tag屬性可以替換
- $route(頁面組件自己的route屬性)/$router(整個應用只有一個，上面有很多router方法可以用)
- router設定檔案中可以設定linkActiveClass與lintExactActiveClass這是路由激活時class名稱的全域的設定
- exact-active-class 完全匹配時候被激活此屬性上的class 默認是router-link-exact-active
- active-class 模糊匹配時被激活此屬性上的class 默認是router-link-active
- exact屬性開啟表示只激活exact-active-class上的class
- 第一層以後的路由設定path不需要加上/
- 路由可以接收query與props參數
- params只能配name,query可以配name與path
- router-link上屬性加上:replace="true"會啟動replace模式，默認是push紀錄
配置
#router/index.js
export deafult new VueRouter({
routes:[
{
name:'home',
path:'/home',
component:Home,
children:[
{
name:'news/:id', //:id是params參數 :id?(這樣代表可有可無)
path:'news', // 第一層以後的路由不需要加上/符號
component:News,
//props會傳給定義的組件裡面的props
//props第一種寫法寫死的參數
props:{
id:1
},
//props第二種寫法
//若props為true會把路由組件收到的params參數傳給定義的組件
props:true,
//props第三種寫法
//值為func返回值的物件一樣會傳給props
//參數可以接收到當前組件$route這樣就可以選擇要用params或是query
props($route){
return {id:$route.query.id}
}
}
]
}
],
linkExactActiveClass:'', //精准匹配時的class
linkActiveClass:'', //模糊匹配時的class
})router-link to寫法
#寫法一
<router-link :to="/home/news?id=1">xxx</router-link> //query
<router-link :to="/home/news/1">xxx</router-link> //1是params，對應路由配置站位符號的:id。
#寫法二(東西多的時候用這個)
<router-link :to="{
path:'/home/news',
query:{
id:1
}
}">xxx</router-link>
#寫法三(使用name的話就不用配置整個路徑短路徑就沒必要使用)
#query傳參
<router-link :to="{
name:'news',
query:{
id:1
}
}">xxx</router-link>
#params傳參
<router-link :to="{
name:'news',
params:{ //params只能給name用不能用path
id:1
}
}">xxx</router-link>
#接收參數
$route.query.id
$route.params.id
props:{
id:Number,
required:true
}編程式路由導航$router
#push
$router.push({
path:'/home/news',
query:{
id:1
}
})
$router.push({
name:'news',
query:{
id:1
}
})
$router.push({
name:'news',
params:{ //params只能給name用不能用path
id:1
}
})
#replace
$router.replace(配置與上面一樣)
//以下為控制瀏覽器前進後退的功能
#back
$router.back()
#foward
$router.foward()
#go
$router.go(正負數字)
路由緩存
可以保存畫面上的參數
#單個緩存
<keep-alive include="news"> //只緩存news(這個是組件的名稱很重要不是路由配置的name)組件名稱的組件，默認是全緩存。
<router-view></router-view>
</keep-alive>
#多個緩存
<keep-alive include="[news,...]"> //寫成陣列可以緩存多個
<router-view></router-view>
</keep-alive>
路由組件生命週期
- activated //進入路由時組件被激活的時候
- deactivated //離開路由時組件被解除激活的時候
路由守衛
#router/index.js
const router = new VueRouter({
routes:[
{
name:'home',
path:'/home',
component:Home,
meta:{ //這裡可以配置想要的訊息
isAuth:true ,
title:'home'
}
}
]
})
//路由切換前調用
router.beforeEach((to,from,next)=>{
console.log(to,'進入的路由訊息')
console.log(from,'從哪個路由來的訊息')
console.log(to.meta.isAuth,'判斷是否要驗證')
next() //此方法必須調用
})
//路由切換之後被調用 主要用於把通過守衛的邏輯程式碼統一寫在這裡
router.afterEach((to,from)=>{
console.log(to,'進入的路由訊息')
})
export deafult router單獨前置路由守衛
#router/index.js
const router = new VueRouter({
routes:[
{
name:'home',
path:'/home',
component:Home,
meta:{ //這裡可以配置想要的訊息
isAuth:true ,
title:'home'
},
//單獨前置路由守衛，只有進入此路由時會調用
beforeEnter:(to,from,next)=>{
console.log(to,'進入的路由訊息')
console.log(from,'從哪個路由來的訊息')
console.log(to.meta.isAuth,'判斷是否要驗證')
next() //此方法必須調用
}
}
]
})組件內路由守衛
#home.vue
export default {
//藉由路由，進入此組件時候調用
beforeRouterEnter(to,from,next){
console.log(to,'進入的路由訊息')
console.log(from,'從哪個路由來的訊息')
next() //此方法必須調用
},
//藉由路由，離開此組件時候調用
beforeRouteLeave(to,from,next){
console.log(to,'進入的路由訊息')
console.log(from,'從哪個路由來的訊息')
next() //此方法必須調用
}
//由上面兩個可以知道RouterEnter的to與RouterLeave的from會是一樣的
}路由模式
- hash模式(#後面的文字不會被server獲取，兼容性好)
- history模式(無#使用history api 比較漂亮但是重整時會有問題要後端服務器配合 )