vue 实现动态路由的方法
很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。
下面主要讲一下思路
1、和后台小哥哥沟通好数据，把我们前端配置的路由表数据给他，他就能看懂了
2、拿到数据需要我们自己再处理
路由中的component后台是给不了的，这里我们只需要后台小哥哥按照我们提供的前端component路径给数据，我们循环加载就可以了
//view就是后台给的数据
return()=>import(`@/view/modules/${view}`);
这样我们就拿到了最重要的数据，即component。
3、把后台提供的数据处理成我们需要的路由表
4、添加到路由中
Router.addRoutes(路由数据)
以下讲一下我在项目中实现过程
1、新建一个router.js
里面做些基本的路由操作，比如导入包，因为我们拿到数据之后还是要自己手动去放到路由中去的
也会写一写不需要后台提供的菜单数据，比如我们测试页面或者login等等
importVuefrom"vue";
importRouterfrom"vue-router";
importAppMainfrom"@/view/modules/main/index";
Vue.use(Router);
exportconst_CONSTANTS_ROUTERS=
[
{
path:"/login",
component:()=>import("@/view/modules/login/index"),
hidden:true
},
{
path:"",
component:AppMain,
redirect:"/dashboard",
children:[
{
path:"/dashboard",
component:()=>import("@/view/modules/dashboard/index"),
name:"Dashboard",
meta:{title:"首页",icon:"dashboard",noCache:true}
}
]
}
];
exportdefaultnewRouter({
mode:"history",
//解决vue框架页面跳转有白色不可追踪色块的bug
scrollBehavior:()=>({x:0,y:0}),
//scrollBehavior:()=>({y:0}),
routes:_CONSTANTS_ROUTERS
});
基本路由表已经建立好了
2、我们在什么时候进行获取完整的路由表数据
这个时候我们就要想到路由钩子函数，当然是Router.beforeEach中做
Router.beforeEach((to,from,next)=>
{
NProgress.start();
if(!Token.isEmpty())
{
if(to.path==="/login")
{
next({path:"/"});
NProgress.done();
}
elseif(to.path==="/404")
{
next();
NProgress.done();
}
else
{
//判断当前用户是否已拉取完角色信息
if(Store.getters.roles.length===0)
{
//拉取路由数据
ACLRepo.listMenuTreeOfCurrentUser().then(response=>
{
Store.dispatch("generateRoutes",response).then(()=>
{
//根据roles权限生成可访问的路由表
Router.addRoutes(Store.getters.addRouters);//动态添加可访问路由表
next({...to,replace:true});//hack方法确保addRoutes已完成,setthereplace:truesothenavigationwillnotleaveahistoryrecord
});
});
}
else
{
next();
}
}
}
else
{
next();
}
});
3、路由数据重新封装
generateRoutes
import{_CONSTANTS_ROUTERS}from"@/scripts/router";
importAppMainfrom"@/view/modules/main/index";
const_PERMISSION={
state:{
routers:_CONSTANTS_ROUTERS,
addRouters:[]
},
mutations:{
setRouters:(state,routers)=>
{
state.addRouters=routers;
//和已经存在的路由表拼接
state.routers=_CONSTANTS_ROUTERS.concat(routers);
}
},
actions:{
generateRoutes({commit},response)
{
letasyncRouters=filterAsyncRouter(response);
asyncRouters.push({path:"*",redirect:"/404",hidden:true});
commit("setRouters",asyncRouters);
}
}
};
functionfilterAsyncRouter(routers)
{
//遍历后台传来的路由字符串，转换为组件对象
letaccessedRouters=routers.filter(router=>
{
if(router.meta)
{
//默认图标处理
router.meta.icon=router.meta.icon?router.meta.icon:"component";
}
if(router.component==="main")
{
//Main组件特殊处理
router.component=AppMain;
}
else
{
//处理组件---重点
router.component=loadView(router.component);
}
//存在子集
if(router.children&&router.children.length)
{
router.children=filterAsyncRouter(router.children);
}
returntrue;
});
returnaccessedRouters;
}
functionloadView(view)
{
//路由懒加载
return()=>import(`@/view/modules/${view}`);
}
exportdefault_PERMISSION;
到这里其实就完成了，理清楚思路，其实很简单
以上就是vue实现动态路由的方法的详细内容，更多关于vue实现动态路由的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。