動態新增路由基本功能

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',meta: {
        title: '賬號設定',requireAuth: true
       },component: setAccount,},{
       name: 'childMgt',path: '/account/childMgt',meta: {
        title: '子賬號管理',component: childMgt,]
},

修改單一結構

{
     name:'account',{
     name:'account',children:[
      {
       name: 'userMgt',

每一層單獨包含一個子集合方便許可權管理動態新增

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')

這樣當我進入頁面會發生如下場景

進入頁面時：A-B-C

返回頁面時：C-B-A

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

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

解決

官方文件

this.$outer.push('home') // 會重複新增路由資訊進入路由記錄

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

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

以上這篇vue路由結構可設一層方便動態新增路由操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。