在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由

發(fā)布時(shí)間：2020-11-06 15:47:59 來(lái)源：億速云閱讀：601 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

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

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

涉及多層路由嵌套如圖

在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由

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

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

例：

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

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

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

每一層單獨(dú)包含一個(gè)子集合方便權(quán)限管理動(dòng)態(tài)添加

main.js

router.beforeEach((to, from, next) => {
 if (from.name == null) { //頁(yè)面刷新
 let pathName = sessionStorage.getItem("pathName") //暫存上一個(gè)路由
 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ǔ)充知識(shí)：vue路由進(jìn)入下一層返回上一層重復(fù)跳轉(zhuǎn)之前進(jìn)入頁(yè)面

說(shuō)明

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

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

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

進(jìn)入頁(yè)面時(shí)：A-B-C

返回頁(yè)面時(shí)：C-B-A

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

總的來(lái)是：頁(yè)面返回時(shí)重復(fù)返回上一層

解決

官方文檔

在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由

this.$outer.push('home') // 會(huì)重復(fù)添加路由信息進(jìn)入路由記錄
this.$outer.replace('home') // 會(huì)替換之前的路由記錄

this.$outer.replace('home') // 跳轉(zhuǎn)頁(yè)面推薦用這個(gè)

以上就是在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

在vue路由結(jié)構(gòu)中如何實(shí)現(xiàn)動(dòng)態(tài)添加路由

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽