Vue路由守衛之路由獨享守衛

​

路由獨立守衛，顧名思義就是這個路由自己的守衛任務，就如同咱們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') //跳轉錯誤路由

        我們在這裡使用使用一個案例來演示它的用法；案例中獨立路由單獨檢測是否在登入狀態，在沒有登錄的情況下彈到登錄界面，和全局登錄效果一致，只不過只保留了自己；

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

        如果覺得不錯請點點手指，關註下我們公眾號，我們會長期為您分享前端知識點；