這篇文章主要介紹如何使用vue-route的beforeEach實(shí)現(xiàn)導(dǎo)航守衛(wèi)功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
路由跳轉(zhuǎn)前做一些驗(yàn)證，比如登錄驗(yàn)證（未登錄去登錄頁），是網(wǎng)站中的普遍需求。對此，vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。
導(dǎo)航守衛(wèi)（navigation-guards）這個(gè)名字，聽起來怪怪的，但既然官方文檔是這樣翻譯的，就姑且這么叫吧。
貼上文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
先來摘抄一段文檔中beforeRouteUpdate 的用法：
你可以使用 router.beforeEach 注冊一個(gè)全局前置守衛(wèi)：
重慶分公司
重慶分公司
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。
next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會被終止且該錯(cuò)誤會被傳遞給 router.onError() 注冊過的回調(diào)。
確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。
下面寫一個(gè)例子，上一篇博客中我們的賬戶頁，包括課程和訂單，都需要在跳轉(zhuǎn)前判斷是不是已登錄；已登錄的情況再去登錄頁，跳轉(zhuǎn)至首頁：
const vueRouter = new Router({
routes: [
//......
{
path: '/account',
name: 'account',
component: Account,
children: [
{name: 'course', path: 'course', component: CourseList},
{name: 'order', path: 'order', component: OrderList}
]
}
]
});
vueRouter.beforeEach(function (to, from, next) {
const nextRoute = [ 'account', 'order', 'course'];
const auth = store.state.auth;
//跳轉(zhuǎn)至上述3個(gè)頁面
if (nextRoute.indexOf(to.name) >= 0) {
//未登錄
if (!store.state.auth.IsLogin) {
vueRouter.push({name: 'login'})
}
}
//已登錄的情況再去登錄頁，跳轉(zhuǎn)至首頁
if (to.name === 'login') {
if (auth.IsLogin) {
vueRouter.push({name: 'home'});
}
}
next();
});Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
以上是“如何使用vue-route的beforeEach實(shí)現(xiàn)導(dǎo)航守衛(wèi)功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
