文档介绍：vue实现动态路由详细
目录
—、前端控制
&1、在routerj或件（把静态路由和动态路由分别写在routerjS
°、storeerss在vuei维护一个stte通过配角色来控制菜单显不显示
&、
:、侧
returntrue
//这个方法是通过递归来遍历路由，把有权限的路由给遍历出来exportfunctionfilterAsyncRoutes(routes,roles)constres=[]
(route=>{consttmp={...route}if(hasPermission(roles,tmpif(){
ildren=
filterAs
yncRou
tes(
dren,
roles
(
tmp)
ret
urn
res
const
sta
te=
rou
tes:
dRo
utes:
const
mut
ations
SET_ROUTES:(state,routes)=这个地方维护了两个状态一个是o,-e个是roes
dRou
tes=rou
tes
tes=
constant
Rou
(rou
tes
constact
ions
genera
teR
ou
tes({
commit
},roles)
retu
rn
ne
wPromise
(resol
ve=>{
et
ccessedR
ou
tes
i
(ro
es('a
dmin')){
ccessedRou
es=
asyncRoutes
else
核心代码，把路由和获取到的角色后台获取的传进去进行匹配
accessedRout
es=fil
terAsyncRoutes(as
yncRou
tes,
roes
把匹配完有权限的路由给se到
里面
commit('SET_R
ccesseoes
resolve(accessed
Routes)
epore
nmespcere
se
mions
cions
3、src/
(新建一个路由守卫函数，可以在min・js也可以抽离出来一个文件)
这里面的代码主要是控制路由跳转之前，
先查一下有哪些可访问的路由，
登录以后跳转的逻辑可以在这个地方写
//.
if
i
eforeEac
(
next({
else{
(to,from,判断是否孫noen
/log
/
ne
//
in'
判断当前用户是否已拉取完
if(
constro
把获取到的ro/传进去进行匹配，生成可以访问的路由
('GenerateR