模塊一：全局導航鈎子函數
1、vue router.beforeEach（全局前置守衛）
beforeEach的鈎子函數，它是一個全局的before 鈎子函數， （before each）意思是在 每次每一個路由改變的時候都得執行一遍。
它的三個參數：
to: (Route路由對象) 即將要進入的目標 路由對象 to對象下面的屬性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
from: (Route路由對象) 當前導航正要離開的路由
next: (Function函數) 一定要調用該方法來 resolve 這個鈎子。 調用方法：next(參數或者空) ***必須調用
next(無參數的時候): 進行管道中的下一個鈎子，如果走到最后一個鈎子函數，那么 導航的狀態就是 confirmed （確認的）
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
應用場景：可進行一些頁面跳轉前處理，例如判斷需要登錄的頁面進行攔截，做登錄跳轉！！
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { //判斷該路由是否需要登錄權限 if (cookies('token')) { //通過封裝好的cookies讀取token，如果存在，name接下一步如果不存在，那跳轉回登錄頁 next()//不要在next里面加"path:/",會陷入死循環 } else { next({ path: '/login', query: {redirect: to.fullPath}//將跳轉的路由path作為參數，登錄成功后跳轉到該路由 }) } } else { next() } }) 應用場景，進入頁面登錄判斷、管理員權限判斷、瀏覽器判斷
復制代碼
//使用鈎子函數對路由進行權限跳轉 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_username'); if(!role && to.path !== '/login'){ next('/login'); }else if(to.meta.permission){ // 如果是管理員權限則可進入，這里只是簡單的模擬管理員權限而已 role === 'admin' ? next() : next('/403'); }else{ // 簡單的判斷IE10及以下不進入富文本編輯器，該組件不兼容 if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){ Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', { confirmButtonText: '確定' }); }else{ next(); } } }) 2，路由改變后的鈎子
（1）通過路由對象的 afterEach() 方法調用。它和上面的 beforeEach() 方法相比，少了 next 參數。
//全局路由改變后鈎子 router.afterEach((to, from) => { console.log('即將進入：', to); console.log('即將離開：', from); }) （2）afterEach() 方法有個常用的地方是自動讓頁面返回最頂端。
比如一個頁面較長，滾動到某個位置后跳轉。這時另一個頁面滾動條默認是上一個頁面停留的位置。我們可以在 afterEach() 方法中將滾動條位置進行重置。
//全局路由改變后鈎子 router.afterEach((to, from) => { //將滾動條恢復到最頂端 window.scrollTo(0, 0); }) 二、路由配置中的鈎子函數
在路由配置文件中我們只能設置路由改變前的鈎子函數（beforeEnter），不能設置改變后的鈎子（afterEach）
const router = new Router({ routes: [ //配置路由，使用數組形式 { path: '/', //鏈接路徑 name: 'index', //路由名稱 component: index //映射的組件 }, { path: '/hello', name: 'hello', component: hello, beforeEnter:(to,from,next)=>{ console.log('即將進入：', to); console.log('即將離開：', from); next(); } } ] }) 至於他的參數的使用，和全局前置守衛是一樣的
三、組件內的鈎子函數
1，鈎子函數介紹
（1）beforeRouteEnter (to, from, next)
在該組件的對應路由被 confirm 前調用。（即路由進入前調用）
由於此時實例還沒被創建，所以此時不能獲取組件實例（this）。
<template> <div> <h1>ID：{{ $route.params.id}}</h1> <h1>用戶名：{{ $route.params.userName}}</h1> </div> </template> <script> export default { //路由進入前調用 beforeRouteEnter (to, from, next) { window.document.title = "歡迎頁"; next(); }, } </script>（2）beforeRouteUpdate (to, from, next)
在當前路由改變，但是該組件被復用時調用。比如：我們在一個帶有動態參數的路徑 /hello/:id 之間跳轉（/hello/1 和 /hello/2），雖然渲染的是同樣的 Detail 組件，但這個鈎子還是會被調用。
該函數內可以訪問獲取組件實例（this）。
（3）beforeRouteLeave (to, from, next)
當導航離開該組件的對應路由時調用。（即路由離開前調用）
該函數內可以訪問獲取組件實例（this）。
導航離開該組件的對應路由時調用，我們用它來禁止用戶離開，比如還未保存草稿，或者在用戶離開前，將 setInterval 銷毀，防止離開之后，定時器還在調用。
|
1
2
3
4
5
6
7
|
beforeRouteLeave (to, from , next) {
if
( 文章保存 ) {
next ();
// 允許離開或者可以跳到別的路由 上面講過了
}
else
{
next (
false
);
// 取消離開
}
}
|
作者：殺個程序猿祭天
鏈接：https://www.jianshu.com/p/7414a1bd11ad
來源：簡書