目標
- 編程式導航
- 路由監(jiān)聽
- 導航守衛(wèi)
編程式導航
https://router.vuejs.org/zh/guide/essentials/navigation.html
該方法的參數(shù)可以是一個字符串路徑有滑，或者一個描述地址的對象。例如：
路由監(jiān)聽
通過watch屬性設置監(jiān)聽$route變化筑公，達到監(jiān)聽路由跳轉(zhuǎn)的目的吓歇。
在App.vue里增加如下代碼
watch: {
// 監(jiān)聽路由跳轉(zhuǎn)孽水。
$route(newRoute, oldRoute) {
console.log('watch', newRoute, oldRoute)
},
}
頁面切換時觀察console
導航守衛(wèi)
全局導航守衛(wèi)
全局導航守衛(wèi)要在main.js 里寫導航守衛(wèi)邏輯
類似這樣：
router.beforeEach(function(to, from, next) {
let flag = sessionStorage.getItem("flag");
//如果登錄標志存在用為isLogin
if(flag==='isLogin'){
next()
//如果已經(jīng)登錄，還想進入登錄界面城看，則定向到首頁
if(!to.meta.auth){
next({
path: '/index'
})
}
}else{
//如果用戶未登錄想進入需要登錄的界面女气，則重定向到登錄頁
if(to.meta.auth){
next({
path: '/login'
})
}else{//如果不需要驗證，則直接放行
next()
}
}
});
目前我們先簡單了解析命，
在main.js里我們先寫如下代碼主卫，然后斷點看
router.beforeEach(function(to, from, next) {
console.log(from);
console.log(to);
});
每個守衛(wèi)方法接收三個參數(shù)：
to: Route: 即將要進入的目標 路由對象from: Route: 當前導航正要離開的路由-
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)鹃愤。next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了完域，則導航的狀態(tài)就是 confirmed (確認的)软吐。next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)吟税，那么 URL 地址會重置到from路由對應的地址凹耙。next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷肠仪，然后進行一個新的導航肖抱。你可以向next傳遞任意位置對象，且允許設置諸如replace: true异旧、name: 'home'之類的選項以及任何用在router-link的toprop 或router.push中的選項意述。next(error): (2.4.0+) 如果傳入next的參數(shù)是一個Error實例，則導航會被終止且該錯誤會被傳遞給router.onError()注冊過的回調(diào)吮蛹。
確保要調(diào)用 next 方法荤崇，否則鉤子就不會被 resolved。
類別
1潮针、全局守衛(wèi) router.beforeEach((to, from, next) => {}) router.beforeResolve((to, from, next) => {}) router.afterEach((to, from) => {})
2术荤、路由守衛(wèi) beforeEnter(to, from, next) {}
3、組件內(nèi)守衛(wèi) beforeRouteEnter(to, from, next) {} beforeRouteUpdate(to, from, next) {} beforeRouteLeave(to, from, next) {}
路由跳轉(zhuǎn)時守衛(wèi)的運行順序如下：##
進入一個新路由 beforeEach => beforeEnter => beforeRouteEnter => beforeResolve => afterEach
當前路由下跳轉(zhuǎn)每篷，如替換路由參數(shù) beforeEach => beforeRouteUpdate => beforeResolve => afterEach
離開當前路由 beforeRouteLeave => beforeEach => beforeResolve => afterEach
