Vue---路由導航守衛函數

VueRouter全局導航守衛函數：前置守衛函數、後置守衛函數。在每次路由跳轉前，會執行前置守衛函數，類似於攔截器/過濾器。路由跳轉後會執行後置守衛函數。

 

前置守衛函數(router是VueRouter對象實例)：

router.beforeEach((to,from,next) => {
	console.log('beforeEach');                  //路由跳轉，修改頁面Title
	next();                                     //必須調用next(),否則路由無法跳轉
})

後置守衛函數：

router.afterEach((to,from) => {
    console.log('afterEach');                                   
})

 

 

在頁面路由跳轉時，通過前置守衛函數修改頁面titlte。

1.在路由規則配置中配置meta屬性：

meta : {
   title : 'Home'
}

2.前置守衛函數：

router.beforeEach((to,from,next) => {
	document.title=to.matched[0].meta.title;   
	next();                                     
})