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

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值