vue 경로 구 조 는 동적 으로 경로 조작 을 편리 하 게 추가 할 수 있 습 니 다.

동적 추가 루트 기본 기능
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,
      },
     ]
},

각 층 마다 하위 집합 편리 권한 관리 동적 추가 가 따로 포함 되 어 있 습 니 다.
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 경로 구 조 는 편리 하고 동태 적 으로 경로 조작 을 추가 할 수 있 습 니 다.바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.