Vue路由守衛之路由獨享守衛
阿新 • • 發佈:2020-12-08
路由獨立守衛,顧名思義就是這個路由自己的守衛任務,就如同咱們LOL,我們守衛的就是獨立一條路,保證我們這條路不要被敵人攻克(當然我們也得打團配合)
在官方定義是這樣說的:你可以在路由配置上直接定義 beforeEnter 守衛,這些守衛與全域性前置守衛的方法引數是一樣的。
const router = new vueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
引數如下:
beforeEnter(to,from,next)
// to 要進入的目標,路由物件
// from 當前導航正要離開的路由
// next 初步認為是展示頁面;(是否顯示跳轉頁面)
next()//直接進to 所指路由
next(false) //中斷當前路由
next('route') //跳轉指定路由
next('error') //跳轉錯誤路由
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
我們在這裡使用使用一個案例來演示它的用法;案例中獨立路由單獨檢測是否在登入狀態,在沒有登入的情況下彈到登入介面,和全域性登入效果一致,只不過只保留了自己;
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'
},
]
}
]
}