前言：
在編寫vue里的登錄注冊時，我們始終繞不開對導航守衛(wèi)的使用，vue-router4.0版里有一些重要更新，在這里分享給大家。
一、什么是導航守衛(wèi)？
正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的。
查看以下情形：
-
點擊主頁鏈接時，默認情況下可直接進入指定界面，如圖，但是問題是該跳轉的界面是需要用戶登錄后方可訪問的
-
可設置導航守衛(wèi)來檢測用戶是否登錄，如果已登錄，則進入后臺頁，如果未登錄，則強制進入登錄頁，如圖
二、導航守衛(wèi)有哪幾種？
1、全局守衛(wèi)（3個）
全局前置守衛(wèi)
每次發(fā)生路由的導航跳轉時，都會觸發(fā)全局前置守衛(wèi)，因此，在全局前置守衛(wèi)中，程序員可以對每個路由進行訪問權限的控制
1、 使用方式
你可以在 router/index.js 頁面中使用 router.beforeEach((to, from, next) => {}) 注冊一個全局前置守衛(wèi)。2、 代碼：
// router/index.js 頁面
router.beforeEach((to, from, next) => {
console.log(to, from);
next()
});
全局解析守衛(wèi)
1、 使用方式
你可以用 router.beforeResolve 注冊一個全局守衛(wèi)。這和 router.beforeEach 類似，因為它在 每次導航時都會觸發(fā)，但是確保在導航被確認之前，同時在所有組件內守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被正確調用。
2、 代碼：
// router/index.js 頁面
router.beforeResolve((to, from, next) => {
console.log(to,from);
next()
})
全局后置鉤子
1、 使用方式
你也可以注冊全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：
2、 代碼：
// router/index.js 頁面
router.afterEach((to, from) => {
console.log(to,from);
})
它們對于分析、更改頁面標題、聲明頁面等輔助功能以及許多其他事情都很有用。
2、路由獨享守衛(wèi)（1個）
1、 使用方式
你可以直接在路由配置上定義 beforeEnter 守衛(wèi)：2、 代碼：
// router/index.js 頁面（路由規(guī)則中）
const routes = [
{
path: '/home',
name: 'Home',
component: HomeView,
beforeEnter: (to, from,next) => {
console.log(to, from);
next()
},
},
]
3、組件內守衛(wèi)（3個）
組件內守衛(wèi)有個三個：路由進入之前beforeRouteEnter，路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate
beforeRouteEnter(to, from, next)
1、 使用方式
在組件模板中使用,跟methods: {}等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
2、 代碼：
// vue 組件內使用
beforeRouteEnter(to, from) {
// 在渲染該組件的對應路由被驗證前調用
// 不能獲取組件實例 `this` ！
// 因為當守衛(wèi)執(zhí)行時，組件實例還沒被創(chuàng)建！
},
注意：
在 vue3 中的 setup 函數中是不可以使用 beforeRouterEnter 這個路由守衛(wèi)的
beforeRouteUpdate(to, from, next)
1、 使用方式
在組件模板中使用,跟 methods: {} 等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的 vue 文件里面的路由守衛(wèi)
2、 代碼：
// vue 組件內使用
onBeforeRouteUpdate((to, from) => {
//當前組件路由改變后，進行觸發(fā)
console.log(to);
});
beforeRouteLeave(to, from, next)
1、 使用方式
在組件模板中使用, 跟methods: {} 等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的 vue 文件里面的路由守衛(wèi)
2、 代碼：
// vue 組件內使用
onBeforeRouteLeave((to, from) => {
//離開當前的組件，觸發(fā)
alert("我離開啦");
});
三、導航守衛(wèi)的三個參數
- to：將要訪問的路由信息對象
- from：將要離開的路由信息對象
- next：函數
- 調用next()表示放行，允許這次路由導航
- 調用next(false)表示不放行，不允許此次路由導航
- 調用next({routerPath})表示導航到此地址，一般情況用戶未登錄時，會導航到登陸界面
提示：
該函數在導航守衛(wèi)中可出現多次，但是只能被調用一次!!!
四、如何在 vue3 中使用 beforeRouteEnter
如果你正在使用組合 API 和 setup 函數來編寫組件，你可以通過 onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。 請參考組合 API 部分以獲得更多細節(jié)。
具體請看vue-router的官方文檔
導航守衛(wèi) | Vue Router
方法一、我們可以在設置路由的時候，使用beforeEnter方法攔截，即在router.js中：
{
path: '/',
name: 'home
component: () => import('@/xxx.vue'),
beforeEnter: (to, from) => {
// 可以在定義路由的時候監(jiān)聽from和to
}
}
方法二、我們還可以使用vue2的寫法，使用選項式api，就可以使用beforeRouterEnter這個鉤子了
<script>
export default {
beforeRouteEnter(to, from) {
console.log('before router enter', to, from)
},
mounted() {
console.log('mounted')
},
}
五、模擬登錄注冊案例
// 模擬是否登錄（true為登錄，false為未登錄）
let token = true
router.beforeEach((to, from, next) => {
// 判斷有沒有登錄
if (!token) {
// 如果沒有登錄，并且是跳轉至登錄頁
if (to.name == "Login") {
// 直接跳轉
next();
} else {
// 否則直接強制跳轉至登錄頁
router.push('/login')
}
} else {
// 如果已經登錄，并且不是跳轉至登錄頁
if (to.name !== "Login") {
// 直接跳轉
next();
} else {
// 否則直接強制跳轉至上一個頁面
router.push(from.path)
}
}
});
總結：
歡迎大家加入我的社區(qū)，在社區(qū)中會不定時發(fā)布一些精選內容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003文章來源：http://www.zghlxwxcb.cn/news/detail-782546.html
以上就是 Vue3 中 導航守衛(wèi) 的使用，不懂得也可以在評論區(qū)里問我或私聊我詢問，以后會持續(xù)發(fā)布一些新的功能，敬請關注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog文章來源地址http://www.zghlxwxcb.cn/news/detail-782546.html
到了這里，關于Vue3 中 導航守衛(wèi) 的使用的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
