vue根据后台数据返回实现权限管理动态路由

zhuanbike 2022-6-6 831

避免重复添加

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

拿到动态路由参数之后

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

路由数据结构

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: '首页',
        },
      },
    ]
  }
]


最新回复 (3)
  • zhuanbike 2022-6-6
    0 2
    今天问到这个 .addRoute 居然懵逼了
  • zhuanbike 2022-6-6
    0 3
    原文地址:https://blog.csdn.net/weixin_44074543/article/details/124628145
  • zhuanbike 2022-6-6
    0 4
    完整示例:https://blog.csdn.net/qq_38211541/article/details/107020434
发新帖