一文詳解vue-router中的導航守衛(wèi)
導航守衛(wèi)是什么
按照官方文檔說明，vue-router 提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的。
在 vue-router 中，導航守衛(wèi)是一種非常重要的功能，它允許你在路由導航過程中添加邏輯驗證和處理，比如判斷用戶是否登錄，如果沒有登錄就跳轉到登錄頁面，如果已經登錄就跳轉到首頁。
導航守衛(wèi)的分類
在 Vue Router 中，有三種類型的導航守衛(wèi)方法可以使用：
全局守衛(wèi)：
beforeEach和afterEach。獨享路由守衛(wèi)：
beforeEnter。組件內路由守衛(wèi)：
beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。
全局守衛(wèi)
全局守衛(wèi)就是在路由跳轉時，對整個應用內的所有路由進行攔截，然后進行一些操作。
全局守衛(wèi)分為全局前置守衛(wèi)和全局后置守衛(wèi)。
全局前置守衛(wèi)就是在路由跳轉之前進行攔截，全局后置守衛(wèi)就是在路由跳轉之后進行攔截。
全局前置守衛(wèi)的使用方法如下：
router.beforeEach((to, from, next) => {
// ...
})全局后置守衛(wèi)的使用方法如下：
router.afterEach((to, from) => {
// ...
})路由獨享守衛(wèi)
路由獨享守衛(wèi)就是在路由跳轉時，對應用內的某個特定的路由進行攔截，然后進行一些操作。
路由獨享守衛(wèi)的使用方法如下：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})組件內守衛(wèi)
組件內守衛(wèi)就是在組件內部定義的特殊守衛(wèi)方法，用于處理組件級別的路由導航。常見的組件內守衛(wèi)包括：
beforeRouteEnter: 在路由進入組件之前被調用，可以訪問不到組件實例（this），但可以通過回調函數獲取組件實例。beforeRouteUpdate: 在當前路由被復用時調用，例如同一個組件在不同參數下進行切換時。beforeRouteLeave: 在離開當前路由之前調用，可以詢問用戶是否保存未保存的數據或執(zhí)行其他清理操作。
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染該組件的對應路由被驗證前調用
// 不能獲取組件實例 `this` ！
// 因為當守衛(wèi)執(zhí)行時，組件實例還沒被創(chuàng)建！
},
beforeRouteUpdate(to, from) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態(tài)參數的路徑 `/users/:id`，在 `/users/1` 和 `/users/2` 之間跳轉的時候，
// 由于會渲染同樣的 `UserDetails` 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 因為在這種情況發(fā)生的時候，組件已經掛載好了，導航守衛(wèi)可以訪問組件實例 `this`
},
beforeRouteLeave(to, from) {
// 在導航離開渲染該組件的對應路由時調用
// 與 `beforeRouteUpdate` 一樣，它可以訪問組件實例 `this`
},
}導航守衛(wèi)的參數
導航守衛(wèi)的參數如下：
to: 即將要進入的目標路由對象,包含了目標路由的路徑、參數、查詢參數等信息，可以用來判斷要導航到哪個路由。from: 當前導航正要離開的路由,包含了當前路由的路徑、參數、查詢參數等信息，可以用來判斷當前路由的狀態(tài)。next方法：用于控制導航行為。它有以下幾種用法：next(): 允許導航，繼續(xù)進行下一步導航操作。next(false): 取消導航，終止當前導航操作。next('/')或next({ path: '/' }): 重定向到指定的路徑。next(error): 導航出錯，可以傳遞一個錯誤對象給 next 方法。
導航守衛(wèi)的執(zhí)行順序
導航守衛(wèi)的執(zhí)行順序如下：
全局前置守衛(wèi) -> 路由獨享守衛(wèi) -> 組件內守衛(wèi) -> 全局后置守衛(wèi)
導航守衛(wèi)的使用場景
全局前置守衛(wèi)
- 判斷用戶是否登錄，如果沒有登錄就跳轉到登錄頁面，如果已經登錄就跳轉到首頁。
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
} else {
const token = localStorage.getItem('token')
if (!token) {
next('/login')
} else {
next()
}
}
})全局后置守衛(wèi)
- 記錄用戶訪問的頁面。
router.afterEach((to, from) => {
localStorage.setItem('path', to.path)
})路由獨享守衛(wèi)
- 判斷用戶是否有權限訪問某個頁面，如果沒有權限就跳轉到首頁。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
const token = localStorage.getItem('token')
if (!token) {
next('/')
} else {
const role = localStorage.getItem('role')
if (to.meta.role && to.meta.role.indexOf(role) === -1) {
next('/')
} else {
next()
}
}
}
}
]
})組件內守衛(wèi)
- 數據預加載：在進入組件之前，需要先加載一些數據?？梢允褂?nbsp;
beforeRouteEnter組件內守衛(wèi)來調用接口獲取數據，并在數據加載完成后再進入組件。
const Foo = {
beforeRouteEnter(to, from, next) {
fetchData().then(data => {
next(vm => {
vm.data = data; // 將數據傳遞給組件實例
});
});
},
};- 路由參數更新：當同一個組件在不同參數下進行切換時，可能需要根據新的參數更新組件的數據或狀態(tài)?？梢允褂?nbsp;
beforeRouteUpdate組件內守衛(wèi)來處理這種情況。
const Baz = {
beforeRouteUpdate(to, from, next) {
if (to.params.id !== from.params.id) {
// 當路由參數 id 發(fā)生變化時，重新請求數據
this.fetchData(to.params.id);
}
next();
},
};- 數據清理：在離開當前路由之前需要執(zhí)行一些清理操作，例如取消訂閱事件、重置組件狀態(tài)等?？梢允褂?nbsp;
beforeRouteLeave組件內守衛(wèi)來處理這些操作。
const Bar = {
beforeRouteLeave(to, from, next) {
if (this.hasUnsavedChanges()) {
if (confirm('是否保存修改的數據？')) {
this.saveData(); // 保存修改的數據
}
}
next();
};- 頁面切換動畫：在切換頁面時添加過渡動畫效果，以提升用戶體驗。可以在
beforeRouteEnter和beforeRouteLeave組件內守衛(wèi)中設置過渡動畫的相關邏輯。
const Qux = {
beforeRouteEnter(to, from, next) {
// 在進入組件之前設置初始過渡狀態(tài)
this.transitionName = 'slide-in';
next();
},
beforeRouteLeave(to, from, next) {
// 在離開組件之前設置過渡狀態(tài)
this.transitionName = 'slide-out';
next();
},
};到此這篇關于一文詳解vue-router中的導航守衛(wèi)的文章就介紹到這了,更多相關vue-router導航守衛(wèi)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue輕松實現水印效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中的項目打包及部署全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
typescript不僅可以約束我們的編碼習慣，還能起到注釋的作用，當我們看到一函數后我們立馬就能知道這個函數的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue項目持久化存儲數據的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹了vue虛擬滾動/虛擬列表簡單實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
這篇文章主要介紹了怎樣查看vue-cli的安裝位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本文里小編給大家整理的是關于vue項目中引入Sass的相關知識點內容，有需要的朋友們可以測試參考下。2019-08-08
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
Vue3組合式函數Composable實戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數Composable實戰(zhàn)ref和unref使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06