动态路由router.addRoutes使用详解

项目菜单要求做动态权限管理，一开始用了大量的if判断+导航守卫，后面发现用addRoutes可以减少大量的代码，详细看看怎么用的吧

最开始的路由结构：

导航守卫部分：

这里就可以看出用了大量的if，非常影响性能，代码也不美观，在vue官网上看到了addRouters，那就用起来吧

官网说明

router.addRoutes
函数签名：

router.addRoutes(routes: Array)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

routes选项要求的数组和之前的格式保持一致，把需要配置的url移出来做成新的数组

修改后的路由结构

const user = () => import('../views/user/list')

const routeArr = [
  {
    path: '/user/list',
    name: '用户管理',
    show: 'user',
    component: user,
  },
 ]

导航守卫部分

const commonUser = window.localStorage.getItem('menuList')
const commonUserRoute = routeArr.filter(function (page) {
  return commonUser.includes(page.show)
})
router.addRoutes(commonUserRoute)

router.beforeEach((to, from, next) => {
  if (to.name === null || to.name === '') {
    Message.error('您无权访问该页面！')
    next({ name: 'Error' })
  } else {
  next()
  }
})

使用addRoutes后少了大量的if，路由结构也清晰了很多，耶！又get一个技能！

参考文章：www.jianshu.com/p/70234816e…