快捷導(dǎo)航

vue路由攔截的三種方法小結(jié)

更新時(shí)間：2024年02月01日 10:00:22 作者：qq_32956731

本文給大家介紹了vue路由攔截的三種方法,全局前置守衛(wèi),路由獨(dú)享守衛(wèi)和全局后置鉤子這三種方法,并通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.全局前置守衛(wèi)

Vue Router 提供了全局前置守衛(wèi)，它可以在路由切換之前對請求進(jìn)行攔截。全局前置守衛(wèi)可以用來檢查用戶是否已經(jīng)登錄，或者檢查用戶是否具有訪問該頁面的權(quán)限。在router/index.js 中添加以下代碼

export function createRouterGuards(){
    try{
        router.beforeEach((to,from,next)=>{
            if(to.meta.noLogin){
                next()
            }else{
                if(getSessionStorage('token')){
                    if(getSessionStorage('menuCodeList').includes(to.meta.menuCode)){
                        next()
                    }
                }
            }
        
        })
    }
}

2.路由獨(dú)享守衛(wèi)

在Vue Router 中，可以為每個(gè)路由單獨(dú)設(shè)置守衛(wèi)，這種守衛(wèi)成為路由獨(dú)享的守衛(wèi)。路由獨(dú)享的守衛(wèi)可以用來檢查路由參數(shù)、調(diào)用異步接口、處理數(shù)據(jù)等。在router/index.js 中添加以下代碼

const router = new VueRouter({
    routes:[{
        path:'/example/:id',
        component:Example,
        beforeEnter:(to,from,next)=>{
            const id = to.params.id
            if(id > 0 && id < 100){
                next()
            }else{
                next('/error')
            }
        }
    }]
})

這個(gè)代碼片段會在路由 /example/:id 的切換之前執(zhí)行，檢查傳入的參數(shù) id 是否滿足條件，如果不滿足則跳轉(zhuǎn)到 /error 頁面，否則就繼續(xù)進(jìn)行路由切換。路由獨(dú)享的守衛(wèi)是一種非常靈活的路由攔截方式，可以讓我們更靈活地控制路由的切換

3.全局后置鉤子

與全局前置守衛(wèi)類似，Vue Router 還提供了全局后置鉤子，它可以在路由切換之后對響應(yīng)進(jìn)行攔截。全局后置鉤子可以用來處理路由切換之后的一些邏輯問題，如頁面統(tǒng)計(jì)、錯(cuò)誤處理等。在router/index.js 中添加以下代碼

router.afterEach((to,from)=>{
    const currentPath = to.path;
    const params = to.params;
    console.log(`切換到${currentPath}頁面，路由參數(shù)為${JSON.stringify(params)}`)
})

這個(gè)代碼片段會在每次路由切換之后執(zhí)行，輸出當(dāng)前路由頁面的路徑和參數(shù)。通過全局后置鉤子，我們可以更好地了解路由狀態(tài)和相應(yīng)的結(jié)果，以便對項(xiàng)目進(jìn)行下一步的開發(fā)和測試。

以上就是vue路由攔截的三種方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于vue路由攔截的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: