什么是路由
對路由這個概念，可能有些人并不很理解，但是路由器大家應該都不陌生。我們可以先來了解一下路由器是什么。路由器現(xiàn)在基本上家家都會有，大家是否好奇過它名字的來源？其實搞懂了路由器名字的來歷，我們就可以搞懂什么是路由了，如下圖:
上面兩張圖分別介紹了路由器和路由的功能。首先他們都是用來進行請求分發(fā)，并且都是根據(jù)地址進行分發(fā)的。在進行分發(fā)時，只要匹配到了地址就會將請求指向該地址對應的資源。只不過路由器分發(fā)的是網(wǎng)絡(luò)資源，而Vue路由則是分頁指向不同的請求頁面，但本質(zhì)上他們的功能是類似的。
什么是路由守衛(wèi)
路由守衛(wèi)，顧名思義就是守護每個請求在路由到目標資源時，檢查該請求是否合法。如上圖所示，對左側(cè)的/test1請求，理論上可以匹配到右側(cè)的 /test1 資源，但有時右側(cè)的 /test1 需要權(quán)限才可以訪問。所以現(xiàn)在就算路由的地址正確，但因為有路由守衛(wèi)的功能，可能會因為未認證或者權(quán)限不夠等問題，我們也不能訪問，這就是路由守衛(wèi)。所以路由守衛(wèi)其實就是對一些請求進行校驗和過濾的防護檢查機制。
路由守衛(wèi)的分類
1. 守衛(wèi)分類
我們先來看看路由守衛(wèi)具體有哪些分類吧。
1.1 全局前置守衛(wèi)(重要)
全局前置守衛(wèi)會在用戶發(fā)起請求觸發(fā)導航時被創(chuàng)建，并且時刻處于等待中，等待著請求的到來。
//創(chuàng)建路由對象
const router?=?new VueRouter({?...?})
/**
?*?調(diào)用全局前置守衛(wèi)
?*?參數(shù)1:?to:?跳轉(zhuǎn)的目標路由對象
?*?參數(shù)2: from：?當前要離開的路由
?*?參數(shù)3:?next函數(shù):?類似于Java中過濾器的放行,如果校驗結(jié)束之后放行,讓請求通過
?*/
router.beforeEach((to,?from,?next)?=>?{//?...})
/**
?*?案例使用
?*/
?router.beforeEach((to,?from,?next)?=>?{
?????if?(to.name?!==?'Login'?&&?!isAuthenticated){
?????????//如果未認證,重新回到登錄頁
?????????next({?name:?'Login'?})
?????}else{
?????????//如果已認證直接放行去to指向的目標資源
?????????next()
?????}
?})
1.2 全局解析守衛(wèi)(2.5.0 新增)
全局解析守衛(wèi)是Vue在2.5.0之后新增的守衛(wèi)類型，和全局前置守衛(wèi)類似。但區(qū)別是在導航被確認之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后解析守衛(wèi)就被調(diào)用。
1.3 全局后置鉤子
全局后置鉤子函數(shù)和守衛(wèi)不同，在守衛(wèi)執(zhí)行的過程中，掛載到守衛(wèi)的執(zhí)行周期中，不會影響守衛(wèi)導航本身。
router.afterEach((to,?from)?=>?{
????//因為沒有next函數(shù)所以全局后置鉤子不會影響導航本身
})
1.4 路由獨享守衛(wèi)(私有守衛(wèi),非全局)
路由獨享守衛(wèi)就是將守衛(wèi)設(shè)置到路由對象中，作為此路由的私有守衛(wèi)。
const router?=?new VueRouter({
????routes:?[
????????{
????????????path:?'/foo',
????????????component:?Foo,
????????????beforeEnter:?(to,?from,?next)?=>?{
????????????????//?使用方式和全局前置守衛(wèi)相同
????????????}
????????}
????]
})
1.5 組件內(nèi)守衛(wèi)
組件內(nèi)守衛(wèi)，就是在組件內(nèi)部定義的守衛(wèi)。
const Foo?=?{
????template:?`...`,
????beforeRouteEnter(to,?from,?next)?{
????????//?在渲染該組件的對應路由被?confirm?前調(diào)用
????????//?不！能！獲取組件實例?`this`
????????//?因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
????},
????beforeRouteUpdate(to,?from,?next)?{
????????//?在當前路由改變，但是該組件被復用時調(diào)用
????????//?舉例來說，對于一個帶有動態(tài)參數(shù)的路徑?/foo/:id，在?/foo/1?和?/foo/2?之間跳轉(zhuǎn)的時候，
????????//?由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。
????????//?可以訪問組件實例?`this`
????},
????beforeRouteLeave(to,?from,?next)?{
????????//?導航離開該組件的對應路由時調(diào)用
????????//?可以訪問組件實例?`this`
????}
}
2.守衛(wèi)的完整運行流程
接下來我們來看看守衛(wèi)的完整運行流程：
1.導航被觸發(fā)；
2.在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)；
3.調(diào)用全局的 beforeEach 守衛(wèi)；
4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)；
5.在路由配置里調(diào)用 beforeEnter；
6.解析異步路由組件；
7.在被激活的組件里調(diào)用 beforeRouteEnter；
8.調(diào)用全局的 beforeResolve 守衛(wèi)；
9.導航被確認；
10.調(diào)用全局的 afterEach 鉤子；
11.觸發(fā) DOM 更新；
12.調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳入。
全局前置守衛(wèi)詳解
全局前置守衛(wèi)是在工作中用的最多的守衛(wèi)，一般用于進行資源的保護(權(quán)限認證和授權(quán)認證)，下面我們來看看壹哥具體的案例，代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-678282.html
<!DOCTYPE html>
<html>
????????<head>
????????????????<meta charset="utf-8"?/>
????????????????<title>路由守衛(wèi)</title>
????????</head>
????????<body>
????????????????<div id="app">
????????????????????????<h4>路由守衛(wèi)案例</h4>
????????????????????????<p>????
????????????????????????????????
????????????????????????????????<router-link to="/foo">Go to Foo</router-link>
????????????????????????????????<router-link to="/bar">Go to Bar</router-link>
????????????????????????</p>
????????????????????????<div>
????????????????????????????????
????????????????????????????????<router-view></router-view>
????????????????????????</div>
????????????????</div>
????????????????
????????????????<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
????????????????<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
????????????????
????????????????<script>
????????????????????????//定義組件
????????????????????????const Foo?=?{?template:?'<div>頁面1(不需要權(quán)限)</div>'?}
????????????????????????const Bar?=?{?template:?'<div>頁面2(需要認證)</div>'?}
????????????????????????const Login?=?{?template:?'<div>登錄頁</div>'?}
????????????????????????//定義路由映射
????????????????????????const routes?=?[
??????????????????????????{?path:?'/foo',name:'Foo',?component:?Foo?},
??????????????????????????{?path:?'/bar',name:'Bar',?component:?Bar?},
??????????????????????????{?path:?'/Login',name:'Login',?component:?Login?}
????????????????????????]
????????????????????????//創(chuàng)建路由
????????????????????????const router?=?new VueRouter({
??????????????????????????routes?//?(縮寫)?相當于?routes:?routes
????????????????????????})
????????????????????????
????????????????????????//路由守衛(wèi)(全局前置路由守衛(wèi))
????????????????????????router.beforeEach((to,?from,?next)?=>?{
????????????????????????????????if(to.name==='Bar'){
????????????????????????????????????????//跳轉(zhuǎn)認證頁面
????????????????????????????????????????next({name:'Login'})
????????????????????????????????}else?if(to.name==='Foo'){
????????????????????????????????????????//直接放行
????????????????????????????????????????next();
????????????????????????????????}else{
????????????????????????????????????????next();
????????????????????????????????}
????????????????????????})
????????????????????????
????????????????????????var app?=?new Vue({
??????????????????????????el:?'#app',
??????????????????????????data:?{
????????????????????????????
??????????????????????????},
??????????????????????????/*?注冊路由?*/
??????????????????????????router:router
????????????????????????})
????????????????</script>
????????</body>
</html>
以上就是Vue中路由守衛(wèi)的一些小秘密，你get到了嗎？大家不妨把最后的案例運行一下，仔細體會一下Vue路由的具體作用。文章來源地址http://www.zghlxwxcb.cn/news/detail-678282.html
到了這里，關(guān)于解密！Vue路由守衛(wèi)的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
