动态路由配置

动态路由

Vue后台管理项目经常有权限控制，不同角色使用不同权限，常用方法就是用addRoute来动态添加路由

$router的addRoute 每次只能添加一个符合路由规则，但路由对象的children里面可以有多个路由对象。

 const routeObj1 = {
    path: "/about",
    component: () =>import("../views/About.vue"),
    children: [
      {
        path: 'one',
        component: () =>import("../views/a.vue")
      },
      {
        path: '/about/two',
        component: () =>import("../views/ff.vue")
      }
    ]
  }

const routeObj2 ={
    path: "/S",
    component: () =>import("../views/powerS.vue")
  }

this.$router.addRoute(routeObj1)
this.$router.addRoute(routeObj2)

添加子路由

想要在about下动态添加子路由three，特别要注意添加的是子路由的path一定要把父路由的路径也带上

  this.$router.addRoute('about',{
    path: '/about/three',
    component: () =>import("../views/C.vue")
  })

重置路由

每次角色切换时，清除上一个角色路由，在添加新路由。 重新创建一个Newrouter，用新的newRouter.matcher覆盖掉原来的router.matcher

// router.js 中
const routes= [] // 默认的路由规则，比如登录页（非权限页）
const router = new VueRouter({
  mode: "hash",//hash 
  base: process.env.BASE_URL,
  routes,
});

// 切换角色时  重置路由
router.$addRoutes = (params) => {
  router.matcher = new VueRouter({ // 重置路由规则
    routes: routes
  }).matcher
  params.forEach((ele) => {
    router.addRoute(ele) // 添加路由
  })
}

刷新页面，动态添加的路由将会消失，提示404。但是 刷新之后将会触发一次onReady事件。

onReady事件，在页面刷新时(路由完成初始化)调用。刷新之后 每次路由跳转都会执行 beforeEach(全局第一个路由守卫)和afterEach(全局最后一个路由守卫)。 onReady在 afterEach触发后才会执行， 且只调用一次。

// router.js 中

router.onReady(() => {
  //路由完成初始化时 调用
  const status = true // 判断用户已登录且已有权限
  if (status) {
    // 可以使用  forEach（() => {}）
    router.addRoute({
      path: "*",
      component: () => import("@/views/sls.vue")
    })
  }
})

router.beforeEach((to, from, next) => { next() })
router.afterEach(() => { })

404页面闪现的问题，如果404页面在默认路由中，刷新页面动态路由正在加载时，页面就会短暂的显示404，解决方案就是，将404页面放在动态路由中加载，即获取动态路由后，push上404页，这样就完美解决了