首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

vue-router路由动态匹配

Sonder
2021-09-15
615字
2分钟
浏览 (3k)

动态路由可以通过router.addRoutes()动态添加;

大概的实现思路是:

复制代码
//路由拦截
router.beforeEach((to,from,next)=>{
 //动态生成路由数据
 addRoutes();
 next();
});
function addRoutes(){
 getNavData().then(res=>{  //请求路由数据
  //生成路由数据
   var data = routesData(res.data.result);
   //动态添加
   router.addRoutes(data);
 })
}
//生成路由数据
function routesData(result){
 result.forEach(item=>{
   routes.push({
     path: item.path,
     name: item.name,
     component: () => import('../views/'+item.component)
   })
 })
 return routes
}

转载视频地址:https://www.zhihu.com/zvideo/1396424201645969408?playTime=389.5

下一篇 / 手摸手带你用实现vue全屏loading插件

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)