快捷導(dǎo)航

vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作

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

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

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

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

this.$router.addRoutes(routes)

涉及多層路由嵌套如圖

單純使用addRoutes 層級結(jié)構(gòu)不同

修改路由結(jié)構(gòu)

例：

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

修改單一結(jié)構(gòu)

{
     name:'account',
     path: '/account/account',
     meta: {
      title: '個人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'account',
       path: '/account/account',
       meta: {
        title: '賬號設(shè)置',
        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,
      },
     ]
},

每一層單獨包含一個子集合方便權(quán)限管理動態(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"))//跳轉(zhuǎn)指定地址 否則404
})

補(bǔ)充知識：vue路由進(jìn)入下一層返回上一層重復(fù)跳轉(zhuǎn)之前進(jìn)入頁面

說明

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

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

這樣當(dāng)我進(jìn)入頁面會發(fā)生如下場景

進(jìn)入頁面時：A-B-C

返回頁面時：C-B-A

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

總的來是：頁面返回時重復(fù)返回上一層

解決

官方文檔