快捷導航

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'
        },

      ]
    }
  ]
}

為大家附上源碼地址https://gitee.com/web94/vueluyouduxiangshouwei

總結(jié)

以上所述是小編給大家介紹的Vue路由守衛(wèi)之路由獨享守衛(wèi),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個應(yīng)用實例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴展到插件的應(yīng)用、多個應(yīng)用實例的創(chuàng)建等,需要的朋友可以參考下
2024-05-05
Element-UI中el-table如何合并相同單元格
這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-08-08
使用Vue3和Plotly.js繪制交互式漏斗圖的示例代碼
漏斗圖常用于可視化業(yè)務(wù)流程中的各個階段的轉(zhuǎn)換率,例如銷售漏斗或營銷漏斗,它可以幫助用戶識別流程中的瓶頸和改進機會,本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-02-02
這篇文章主要介紹了vue實現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀?，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03