快捷導航

Vue路由守衛(wèi)之路由獨享守衛(wèi)

更新時間：2019年09月25日 13:52:31 作者：麥葉

這篇文章主要介紹了Vue路由守衛(wèi)之路由獨享守衛(wèi)的代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

路由獨立守衛(wèi)，顧名思義就是這個路由自己的守衛(wèi)任務(wù)，就如同咱們LOL，我們守衛(wèi)的就是獨立一條路，保證我們這條路不要被敵人攻克(當然我們也得打團配合)

在官方定義是這樣說的：你可以在路由配置上直接定義 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  要進入的目標，路由對象
// from 當前導航正要離開的路由
// next 初步認為是展示頁面；（是否顯示跳轉(zhuǎn)頁面）

next()//直接進to 所指路由
next(false) //中斷當前路由
next('route') //跳轉(zhuǎn)指定路由
next('error') //跳轉(zhuǎn)錯誤路由

我們在這里使用使用一個案例來演示它的用法；案例中獨立路由單獨檢測是否在登入狀態(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'
        },

      ]
    }
  ]
}