路由守衛(wèi)
正如其名，
vue-router
提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。簡單來說，就是在路由跳轉(zhuǎn)
時(shí)候的一些鉤子，當(dāng)從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面時(shí)，可以在跳轉(zhuǎn)前、中、后做一些事情。
當(dāng)你打開一個(gè)頁面的前后需要去干什么。
每個(gè)守衛(wèi)方法接收參數(shù)：
- to：即將要進(jìn)入的目標(biāo)，是一個(gè)路由對(duì)象
- from：當(dāng)前導(dǎo)航正要離開的路由，也是一個(gè)路由對(duì)象
- next：可選，是一個(gè)方法，直接進(jìn)入下一個(gè)路由
你可以使用
router.beforeEach
注冊(cè)一個(gè)全局前置守衛(wèi)，當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，就會(huì)異步執(zhí)行這個(gè)回調(diào)函數(shù)。
to是指從哪個(gè)頁面來，from代表從根目錄來。to：從哪來? from：到哪去? ??
//2.創(chuàng)建路由實(shí)例并傳遞上面路由對(duì)象routes
const router = createRouter({
//路由的一種前端展現(xiàn)方式，通常使用這個(gè)就行了
history: createWebHistory(),
routes
}
)
//定義前置路由守衛(wèi)。進(jìn)入某個(gè)頁面之前需要干什么
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
})
router.beforeEach((to, from, next) => {
//如果用戶訪問登錄頁，直接放行
if(to.path == '/login') {
return next()
}
const token = '' //模擬token，正常是從本地cookie或localstorage中獲取
if (token) {
return next() //如果有token，則正常跳轉(zhuǎn)訪問
} else {
return next('/login') //如果沒有token，跳轉(zhuǎn)到登錄頁
}
})一.全局守衛(wèi)
1.全局前置守衛(wèi)
語法:
router.beforeEach((to,from,next)=>{})
參數(shù)說明:
to：進(jìn)入到哪個(gè)路由去
from：從哪個(gè)路由離開
next：函數(shù)，決定是否展示你要看到的路由頁面。文章來源：http://www.zghlxwxcb.cn/news/detail-631642.html
示例:
main.js 中設(shè)置全局守衛(wèi)文章來源地址http://www.zghlxwxcb.cn/news/detail-631642.html
- 在main.js中，有一個(gè)路由實(shí)例化對(duì)象router。在main.js中設(shè)置守衛(wèi)已是全局守衛(wèi)。
- 如下，判斷to.path當(dāng)前將要進(jìn)入的路徑是否為登錄或注冊(cè)，如果是就執(zhí)行next()，展示當(dāng)前界面。如果不是，就彈出alert，然后移至登錄界面。
- 這樣就可實(shí)現(xiàn)，用戶在未登錄狀態(tài)下，展示的一直是登錄界面。
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('您還沒有登錄，請(qǐng)先登錄');
next('/login');
}})到了這里，關(guān)于Vue 路由 路由守衛(wèi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
