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