Vue路由守衛(wèi)之路由獨(dú)享守衛(wèi)
路由獨(dú)立守衛(wèi),顧名思義就是這個(gè)路由自己的守衛(wèi)任務(wù),就如同咱們LOL,我們守衛(wèi)的就是獨(dú)立一條路,保證我們這條路不要被敵人攻克(當(dāng)然我們也得打團(tuán)配合)
在官方定義是這樣說的:你可以在路由配置上直接定義 beforeEnter 守衛(wèi),這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
參數(shù)如下:
beforeEnter(to,from,next)
// to 要進(jìn)入的目標(biāo),路由對(duì)象
// from 當(dāng)前導(dǎo)航正要離開的路由
// next 初步認(rèn)為是展示頁面;(是否顯示跳轉(zhuǎn)頁面)
next()//直接進(jìn)to 所指路由
next(false) //中斷當(dāng)前路由
next('route') //跳轉(zhuǎn)指定路由
next('error') //跳轉(zhuǎn)錯(cuò)誤路由
我們在這里使用使用一個(gè)案例來演示它的用法;案例中獨(dú)立路由單獨(dú)檢測是否在登入狀態(tài),在沒有登錄的情況下彈到登錄界面,和全局登錄效果一致,只不過只保留了自己;
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Index from './Index/Index.vue'
import AA from './views/AA.vue'
import DD from './views/DD.vue'
import EE from './views/EE.vue'
export default {
routes: [
{
path: '/',
component: Index,
name: 'index',
children: [
{
path: 'AA',
component: AA,
name: 'aa',
beforeEnter: (to, from, next) => {
if (to.path == '/DD') {
next()
} else {
alert('請登入');
next('/DD')
}
}
}, {
path: 'DD',
component: DD,
name: 'dd'
},
{
path: 'EE',
component: EE,
name: 'ee'
},
]
}
]
}
為大家附上源碼地址https://gitee.com/web94/vueluyouduxiangshouwei
總結(jié)
以上所述是小編給大家介紹的Vue路由守衛(wèi)之路由獨(dú)享守衛(wèi),希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue-Router實(shí)現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁面正在加載特效方法示例,文中給出了詳細(xì)的示例代碼,相信對(duì)大家具有一定的參考價(jià)值,有需要的朋友們下面來一起看看吧。2017-02-02
vue emit之Property or method “$$v“ i
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
如何修改element-ui日期下拉框datetimePicker的背景色樣式

