一般的动态路由，有固定的权限的，可以在前端存储一份权限路由，可以移步 vue-element-admin，比较详细。

1.我们需要后端的配合，如果后端给的数据格式不合适，你需要做大量的操作来洗数据，数据格式可以按照这种

[
    {
        path: '/home',
        component: 'Layout',
        name: "首页",
        meta: {
            icon: 'home',
        },
        redirect: "/home/list",
        children: [
            {
                path: 'list',
                component: '/home/list',
                name: "列表",
                meta: {
                    icon: 'list',
                },
            }
        ]
    }
]

2.我们首先要在路由守卫 beforeEach 里判断是否已登录，如已登录再判断是否已经添加过路由，如未添加去调用获取路由列表的方法

// 判断是否已经添加过路由
let flag = false;
router.beforeEach(async (to, from, next) => {
  // 判断token是否存在的函数
  const hasToken = getToken();
  // token存在，已经登录
  if (hasToken) {
    // 判断路由是否已经保存了
    if (!flag) {
      // 未储存路由，调用方法向服务器获取路由
      await getUserRouters();
      flag = true;
      next({ ...to, replace: true })
    }
     if(to.path === '/login') {
      next({ path: '/' })
     } else {
      next();
     }
  } else {
    next(`/login?redirect=${to.path}`)
  }
})

3.获取路由列表方法

// 向服务器获取路由
const getUserRouters = () => {
  return new Promise((reslove, reject) => {
    // 请求路由的api
    getLoginUserPermission().then((res) => {
        // 拷贝路由数据
        const data = res.data.list
        if (!data.length) { // 路由为空就说明无权限
          Message({
            message: "当前账号暂无任何权限",
            duration: 5000,
            type: "warning"
          })
          reject()
          return
        }
        // 存储路由到vuex中
        store.dispatch('user/AddRouter', data);
        // 路由筛选函数
        const addRoute = formatRoutes(data)
        // 动态路由添加
        router.addRoutes(addRoute)
        //添加完动态路由再将404跳转添加
        router.addRoutes([{
          path: '*',
          redirect: '/404',
          hidden: true
        }])
        reslove()
      })
  })
}

4.遍历转换路由格式

// 遍历转换路由格式
function formatRoutes(menu) {
  const routers = [];
  menu.forEach(v => {
    const {
      component,
      children
    } = v;
    if (component) {
      if (component === "Layout") { // Layout 组件做特殊处理
        v.component = Layout;
      } else {
        v.component = (resole) => require([`@/views${component}`], resole)
      }
      if(children && children.length) {
        v.children = formatRoutes(children)
      }
      routers.push(v);
    }
  })
  // 返回已经洗好的数据
  return routers
}

文章到这里，动态路由就已经完成了