vue路由結構可設一層方便動態(tài)添加路由操作

更新時間：2020年08月31日 10:48:23 作者：一行注釋

這篇文章主要介紹了vue路由結構可設一層方便動態(tài)添加路由操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

動態(tài)添加路由基本功能

let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }]

this.$router.addRoutes(routes)

涉及多層路由嵌套如圖

單純使用addRoutes 層級結構不同

修改路由結構

例：

{
     name:'account',
     path: '/account/account',
     meta: {
      title: '個人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'account',
       path: '/account/account',
       meta: {
        title: '賬號設置',
        requireAuth: true
       },
       component: setAccount,
      },
      {
       name: 'childMgt',
       path: '/account/childMgt',
       meta: {
        title: '子賬號管理',
        requireAuth: true
       },
       component: childMgt,
      },
      
     ]
},

修改單一結構

{
     name:'account',
     path: '/account/account',
     meta: {
      title: '個人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'account',
       path: '/account/account',
       meta: {
        title: '賬號設置',
        requireAuth: true
       },
       component: setAccount,
      },
     ]
},
{
     name:'account',
     path: '/account/childMgt',
     meta: {
      title: '個人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'userMgt',
       path: '/account/childMgt',
       meta: {
        title: '子賬號管理',
        requireAuth: true
       },
       component: childMgt,
      },
     ]
},

每一層單獨包含一個子集合方便權限管理動態(tài)添加

main.js

router.beforeEach((to, from, next) => {
 if (from.name == null) { //頁面刷新
 let pathName = sessionStorage.getItem("pathName") //暫存上一個路由
 if (pathName == to.path||pathName==to.redirectedFrom) {
 } else {
  sessionStorage.setItem("pathName", to.redirectedFrom)
 }
 } else {
  sessionStorage.setItem("pathName", to.path)
 }
 next()
})

app.vue

let routes=[處理后路由信息]
this.$router.addRoutes(routes)
this.$nextTick(i=>{
  this.$router.replace(sessionStorage.getItem("pathName"))//跳轉指定地址 否則404
})

補充知識：vue路由進入下一層返回上一層重復跳轉之前進入頁面

說明

vue路由返回上一層，使用 this.$router.back(-1)

進入其他頁面用 this.$outer.push('home')

這樣當我進入頁面會發(fā)生如下場景

進入頁面時：A-B-C

返回頁面時：C-B-A

總的路徑行程：A-B-C-B-A

總的來是：頁面返回時重復返回上一層

解決

官方文檔

this.$outer.push('home') // 會重復添加路由信息進入路由記錄

this.$outer.replace('home') // 會替換之前的路由記錄

this.$outer.replace('home') // 跳轉頁面推薦用這個

以上這篇vue路由結構可設一層方便動態(tài)添加路由操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

springboot + vue+elementUI實現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實現(xiàn)前端圖片上傳,并將圖片存儲到后端數據庫,同時在頁面上回顯上傳的圖片,后端通過接口接收圖片,并將其存儲在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧
2025-01-01
Vue和React響應式的區(qū)別及說明
React和Vue在響應式機制上各有特點：Vue通過Proxy或Object.defineProperty自動追蹤依賴,支持細粒度更新；React基于不可變數據,通過setState顯式觸發(fā)更新,依賴虛擬DOM的Diff算法批量更新,Vue強調聲明式和自動優(yōu)化,React強調函數式編程和顯式控制
2025-02-02
Vant picker 多級聯(lián)動操作
這篇文章主要介紹了Vant picker 多級聯(lián)動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下
2024-03-03
vue中的過濾器實例代碼詳解
這篇文章主要介紹了vue中的過濾器，本文通過文字實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
Vue3.0使用ref和reactive來創(chuàng)建響應式數據
ref?和?reactive?是?Composition?API?中用來創(chuàng)建響應式數據的兩個核心函數,在本篇文章中,我們將詳細講解如何使用?ref?和?reactive?來創(chuàng)建響應式數據,并展示它們之間的區(qū)別和使用場景,需要的朋友可以參考下
2024-11-11
vuex刷新之后數據丟失,數據持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數據丟失,數據持久化,vuex-persistedstate問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue-cli是什么及創(chuàng)建vue-cli項目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具，支持創(chuàng)建vue2和vue3的項目，本文給大家詳細講解vue-cli是什么及創(chuàng)建vue-cli項目的方法，感興趣的朋友跟隨小編一起看看吧
2023-04-04
Vue中的reactive函數操作代碼
這篇文章主要介紹了Vue中的reactive函數,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
vue實現(xiàn)樹形表格
這篇文章主要為大家詳細介紹了vue實現(xiàn)樹形表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09