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