概述
何為路由守衛？路由守衛有點類似于ajax的請求攔截器，就是請求發送之前先給你攔截住做一些事情之后再去發送請求，同樣這里的路由守衛意思差不多；簡單理解為就是你在進路由之前，首先把你攔住，對你進行檢查；這是不是有點中學門口的保安？進來之前攔住，有學生證就進，沒有學生證就不讓進；當然，路由守衛不僅僅只是在你進入之前攔住你，還有其他的鉤子函數進行其他操作；
vue-router一共給我們提供了三大類鉤子函數來實現路由守衛：
1、全局鉤子函數（beforeEach、afterEach)
2、路由獨享的鉤子函數（beforeEnter）
3、組件內鉤子函數（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）
首先我們先來看一下全局鉤子函數：
全局鉤子函數
beforeEach：
beforeEach一共接收三個參數，分別是to、from、next；to：即將進入的路由對象；from：正要離開的路由對象；next：路由的控制參數；
next一共有四種調用方式：
next()：一切正常調用這個方法進入下一個鉤子；
next(false)：取消路由導航，這時的url顯示的是正要離開的路由地址；
next('/login')：當前路由被終止，進入一個新的路由導航（路由地址可以自由指定）
next(error)：路由導航終止并且錯誤會被傳遞到router.onError()注冊過的回調中；
我們一般是用全局鉤子來控制權限，像什么進頁面沒有登錄就跳登錄頁，需要用戶達到什么級別才能訪問當前頁面都是屬于頁面權限控制，都是可以通過beforeEach鉤子函數來實現：
main.js（全局鉤子函數我們一般是在main.js中進行書寫）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 進入路由前方法勾子router.beforeEach((to, from, next) => { console.log(to, '前置第一個參數') console.log(from, '前置第二個參數') console.log(next, '前置第三個參數') / to 目標路由 from 源路由 next 跳轉到下一個路由 *///這里暫時用local、storange來簡單模擬驗證權限 if (window.localstorange.getItem("token")) { // 如果存在，則直接跳轉到對應路由 next(); } else { // 如果不存在，則跳轉到登錄頁 next('/login'); }}); |
AfterEach：
AfterEach和beforeEach一樣都是屬于全局守衛鉤子，都是在main.js中進行調用；其中AfterEach比beforeEach少一個next參數；
from：正要離開的路由對象；
afterEach()我們一般用來重置頁面滾動條位置：
假如我們有一個頁面很長，滾動后其中的某個位置后跳轉，這時新的頁面的滾動條位置就會在上一個頁面停留的位置；這個時候我們就可以利用afterEach進行重置：
|
1
2
3
4
5
|
//全局路由改變后鉤子router.afterEach((to, from) => { //將滾動條恢復到最頂端 window.scrollTo(0, 0);}) |
路由獨享的鉤子函數
beforeEneter：
路由獨享顧名思義就是指定的路由才有這些鉤子函數，通常這類路由獨享的鉤子函數我們是在路由配置文件中進行配置，只能設置改變前的鉤子，不能設置改變后的鉤子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const router=new VueRouter({ routes});const routes=[ { path:'/page1', component:page1, children: [ { path: "phone", component: phone }, { path: "computer", component: computer }, ],//路由獨享的鉤子函數 beforeEnter:(to,from,next)=>{ console.log(to); console.log(from); next(false); } }, |
上述代碼理解為只有進入/page1才會觸發beforeEnter這個鉤子，如果進入其他頁面，是不觸發的；
組件內的鉤子函數
beforeRouteEnter(to,from,next)：
在路由進入前調用，因為此時的vue實例還沒有創建，所以beforeEnter是唯一一個不能使用this的鉤子函數；
to:即將要進入的路由對象；
from：正要離開的路由對象；
next：路由控制參數
beforeRouteUpdate(to,from,next):
在路由發生修改的時候進行調用，比如我們上一篇文章講到的動態路由傳參，這種情況我們的beforeRouteUpdate也是會被調用的；
to:即將要進入的路由對象；
from：正要離開的路由對象；
next：路由控制參數；
beforeRouteLeave(to,from,next):
在路由離開該組件時調用；
to:即將要進入的路由對象；
from：正要離開的路由對象；
next：路由控制參數
注意：beforeRouteEnter因為觸發的時候vue實例還沒有創建，所以這個鉤子函數中不能使用this，而beforeRouteUpdate和beforeRouteLeave都是可以訪問到實例的，因為當這兩個函數觸發的時候實例都已經被創建了；
當調用組件內的鉤子函數的時候，我們通常是在組件內部進行調用，舉個例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<template> <div> <h1 id="h1">主頁</h1> <p> <router-link to="/page1/phone">手機</router-link> <router-link to="/page1/computer">電腦</router-link> </p> <router-view></router-view> </div></template><script> export default { //路由進入前調用 beforeRouteEnter (to, from, next) { window.document.title = "歡迎"; next(); }, //路由修改時調用 beforeRouteUpdate(to,from,next){ }, //路由離開時調用 beforeRouteLeave(to,from,next){ }, data () { return { msg: "我是page1組件" } }, }</script> |
以上就是vue-router鉤子函數實現路由守衛的詳細內容，更多關于vue-router路由守衛的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/dengyao-blogs/p/11576614.html
