Vue導航守衛怎么使用

這篇文章主要介紹“Vue導航守衛怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue導航守衛怎么使用”文章能幫助大家解決問題。

守衛參數

• to: 即將要進入的目標路由

• from: 當前導航即將要離開的路由

• next(可選): 不傳參默認去to路由，傳參可改變目標路由

注意：可以向任意給定的導航守衛傳遞next，但是next的使用過程容易出錯，需要確保next在任何給定的導航守衛中都被嚴格調用一次。（可以出現多于一次，但是只能在所有邏輯路徑都不重疊的情況，否則鉤子永遠不會被解析或者報錯）

守衛返回值

• false: 取消當前導航

• 路由地址：導航中斷，跳轉到返回的路由地址。（例如：return {name:‘login’}跳轉到登陸頁）

• undefined/true: 導航有效，調用下一個導航守衛

• 注意：如果有錯誤，會取消導航并調用router.onError()

全局守衛

全局前置守衛

const router = createRouter({...})
router.beforeEach((to, from) => {
})

• 導航觸發時，全局前置守衛按照創建順序調用

• 守衛是異步解析執行，導航在所有守衛resolve完之前一直處于等待

全局解析守衛

router.beforeResolve(async to => {
})

• 在導航被確認之前，在所有組件內守衛和異步路由組件被解析之后調用

• 是獲取數據或避免用戶無法進入頁面時執行操作的理想位置

全局后置鉤子

router.afterEach((to, from) => {
})

• 和守衛的區別：不會接收next函數，也不會改變導航

• 作用：分析/更改頁面標題，聲明頁面等

單個路由獨享守衛

const routes = [{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
    },
    // beforeEnter: [removeQuery, removeHash]
}]

• 只在進入路由時觸發，不會在params/query/hash改變時觸發（如：/user/1 -> /user/2）

• 傳參：可以傳遞函數數組，有利于重用守衛

組件級守衛

• beforeRouteEnter: 在渲染該組件對應路由被驗證前調用，不能獲取this

• beforeRouteUpdate: 在組件被復用時調用，可以訪問this

• beforeRouteLeave: 在導航離開該組件路由時調用，可以訪問this

注意：beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通過'vm'訪問組件實例
    })
}

離開守衛：通常用來預防用戶在還未保存修改前突然離開，可以通過返回false來取消

完整的導航解析流程

1. 導航被觸發

2. 在離開的組件里調用 beforeRouteLeave 守衛

3. 調用全局的 beforeEach 守衛

4. （如果是重用組件）調用 beforeRouteUpdate 守衛

5. 在路由配置里調用 beforeEnter

6. 解析異步路由組件

7. 在被激活的組件里調用 beforeRouteEnter

8. 調用全局的 beforeResolve 守衛

9. 導航被確認

10. 調用全局的 afterEach 鉤子

11. 觸發 DOM 更新

12. 調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創建好的組件實例會作為回調函數的參數傳入

關于“Vue導航守衛怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。