快捷導(dǎo)航

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

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

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

路由獨(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ò)誤路由

我們?cè)谶@里使用使用一個(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('請(qǐng)登入');
              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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: