vue 后端返回数据实现动态路由（权限管理）

结合router.addRoute和localStorage实现

案例逻辑

登录时调用一次，进入平台页面后正常使用，在平台页面刷新，再调用一次，通过判断router对象中有没有动态路由数据的差别实现调用该方法，避免路由重复添加

var optData = JSON.parse(localStorage.getItem("optData"))||[];//路由数据
for(let i =0,length =optData.length;i++){
  //箭头函数无法通过localStorage保存，所以后端返回路由数据后，前端要遍历添加文件的路径
  optData[i].component=() => import(`@/views/HomePage${optData[i].path}.vue`)
  //console.log(`@/views/HomePage/${optData[i].path}.vue`)
  const  element = optData[i];
  //console.log('element==',element)
  router.addRoute('HomePage',element);
}

上面的代码放在router.beforeEach之前

登录页面，拿到路由数据后执行下面的代码

let optData=[]//动态路由数据
//发送请求，后端根据用户返回路由数据，前端将其放入optData
//optData=res.data
localStorage.setItem('optData',JSON.stringify(optData))
for(let i =0,length =optData.length;i++){
    optData[i].component=() => import(`@/views/HomePage${optData[i].path}.vue`)
    const element = optData[i];
    this.$router.addRoute('HomePage',element);
}

所有的路由数据都会添加到HomePage的children中

路由数据结构

const routes = [
  {
    path: '/Login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
    meta: {
      title: '登录',
    },
  },
  {
    path: '/',
    name: 'homePage',
    component: () => import('@/views/homePage.vue'),
    redirect: '/homePage/xxx',//重定向要打开的页面
    children: [
      // ====================后端返回的数据结构=============================
      {
        path: '/homePage/xxx',
        name: 'xxx',
        component: () => import('@/views/homePage/xxx.vue'),//前端遍历添加
        meta: {
          title: '首页',
        },
      },
    ]
  }
]