千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > vue-router怎么生成动态地址

vue-router怎么生成动态地址

来源:千锋教育
发布人:qyf
时间: 2022-09-23 18:01:03 1663927263

vue-router怎么生成动态地址

  1. 动态路由配置的应用场景

  一般我们在使用vue-router进行路由管理的时候,是通过如下方式配置路由与组件之间的映射关系:

  // router/index.js配置文件

  const router = new VueRouter({

  routes:[

  {

  path:'/login',

  component:()=>import ('../views/Login') //登录路由

  },

  {

  path:'/reg',

  component:()=>import ('../views/Reg') //注册路由

  },

  {

  path:'/admin',

  component:()=>import ('../views/Admin') //这是一个管理员才能访问的路由

  },

  {

  path:'/vip',

  component:()=>import ('../views/Vip') //假设,这是要给vip用户才能访问的路由

  },

  ]

  })

  但是在后台管理平台这种类型的项目中,我们需要让拥有不同角色权限的用户,访问不同的菜单及路由,如上述代码所示,部分路由只有管理员才能访问,而另外一部分路由只能vip用户才能访问,所以需要用到vue-router提供的addRoute方法来动态管理这一部分路由配置。

  2. 本地只配置通用路由

  我们为了实现路由的动态配置,需要将上述路由配置进行拆分,本地配置文件中,只保留通用的路由映射。

  const router = new VueRouter({

  routes:[

  {

  path:'/login',

  component:()=>import ('../views/Login') //登录路由

  },

  {

  path:'/reg',

  component:()=>import ('../views/Reg') //注册路由

  }

  ]

  })

  3. 后端为每个用户分配一个角色,随登录接口下发给前端

  4. app.get('/login',(req,res)=>{

  5. //此处需要实现登录相关逻辑

  6. res.send({

  7. username:'张三丰',

  8. role:'admin', //标志当前用户角色

  9. routerList:[ //此处的路由配置,也可以通过独立接口向前端提供

  10. {

  11. path:'/admin',

  12. component:()=>import ('../views/Admin') //这是一个管理员才能访问的路由

  13. },

  14. ...此处可能会有很多其他路由,这些路由数据应该由专门的数据表来存储

  15. ]

  16. })

  17. })

  4、前端登录并动态获取路由配置

  前端登录成功后,会得到后端动态下发的,跟自己账号角色相匹配的路由数据,此时可以通过addRoute方法,将这些动态获取的路由配置数据包,设置给router对象

  // views/Login.vue 登录面板

  axios.get('/login',(result)=>{

  let {routerList} = result

  routerList.forEach((item) => {

  this.$router.addRoute(item)

  })

  })

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT