介绍
怎么在vue中使用addRoutes实现动态路由?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
//初始路由:
[{
,路径:& # 39;/登录# 39;
,名字:& # 39;登录# 39;
组件:大敌;(解决),=祝辞,要求((& # 39;. ./视图/普通/404. vue # 39;],,解决)
},{
,路径:& # 39;/404 & # 39;
,名字:& # 39;404 & # 39;
组件:大敌;(解决),=祝辞,要求((& # 39;. ./视图/普通/404. vue # 39;],,解决)
},{
,路径:& # 39;* & # 39;
,重定向:& # 39;/404 & # 39;
})//登录逻辑
let vm =,;
axios.get(& # 39;/登录# 39;,,vm.user),然后((res),=祝辞,{
let 才能;extendsRoutes =, filterRoutes (res.menus);,
& lt; !——才能//假才能设得到的可用路由如下
[{才能
,,,路径:& # 39;/& # 39;
,,,的名字:& # 39;首页& # 39;,
,,组件:,(解决),=祝辞,要求((& # 39;. ./视图/index.vue& # 39;],,解决),
,,,孩子们:[{
,,,路径:,& # 39;/菜单# 39;
,,,名字:,& # 39;菜单管理& # 39;,
组件:,,,,(解决),=祝辞,要求((& # 39;. ./视图/menus.vue& # 39;],,解决)
,,,},{
,,,路径:,& # 39;/资源# 39;
,,,名字:,& # 39;资源管理& # 39;,
组件:,,,,(解决),=祝辞,要求((& # 39;. ./视图/resources.vue& # 39;],,解决)
,,}]
}]才能——比;//才能存菜单
sessionStorage.setItem才能(& # 39;菜单# 39;,JSON.stringify (extendsRoutes[0]定格));//才能动态添加路由
vm。美元才能router.addRoutes (extendsRoutes);//跳才能转到应用界面
vm。美元才能router.push({路径:& # 39;/& # 39;});
}）//首页获取菜单数据
时间=this.menus JSON.parse (sessionStorage.getItem(& # 39;菜单# 39;)),,//用此数据循环菜单
. . 目前为止看上去一切顺利,然而前方有坑。
<强>动态路由的坑
第一个坑是,如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404,这是因为启动服务后将默认打开首页& # 39;/',然而初始路由中没有这个路径,因此根据路由规则跳转到404年了。我们希望结果当然是跳转到& # 39;/登录# 39;,因此需要对这种情况做判断,在用户登录之前所有请求都要指向& # 39;/登录# 39;,这个判断可以在前钩子里做也可以在根组件里做,建议做在根组件的创建回调里,核心代码大概这样:
let isLogin =, sessionStorage.getItem(& # 39;用户# 39;);
如果(! isLogin) {
return 才能。美元router.push({路径:& # 39;/登录# 39;});
} 这时候已经可以顺利登录了,登录后很快就会发现第二个坑,手动刷新页面又会跳到404年,这是因为刷新会导致Vue重新实例化,路由也恢复到了初始路由,于是当前路径又被重定向到404年了,这个问题的根源是可用路由没有实现持久化,那么可以通过将路由数据sessionStorage存来解决,实例化之前如果检测到本地路由就直接合并路由,像这样:
//检测本地路由
let localRoutes =, sessionStorage.getItem(& # 39;路线# 39;);
如果(localRoutes) {
router.addRoutes才能(JSON.parse (localRoutes));
}//实例化
Vue ({new
,el: & # 39; #应用# 39;
,路由器,
,呈现:h =祝辞,h(应用)
}); 理论上可以,但实际操作要远比上述代码复杂,因为存在本地的只能是权限数据而不是真实路由,路由在存、取之前都要先根据权限匹配获得,过程还是挺繁琐的,而且必须依赖sessionStorage这种持久存储,没有其他方法。问题就出在这个sessionStorage上,原则上权限只能在内存变量中流转,不能直接暴露到用户可操作的地方,试想只要用户手动修改了sessionStorage里的权限,再刷新一下页面就能突破前端路由控制了,非常的不靠谱。
<强>改进方案
既然不能存本地,那就每次刷新都重新从服务端获取,所以改进后的方案是本地存用户的令牌,每次刷新要凭牌从服务端重新获取用户信息和权限,然后动态更新路由,获取权限操作可以跟登录检测一起放在根组件的创建回调中进行,确保访问任何路径都会先执行这一步,但因为获取权限是异步操作,在此之前仍然会经过应用初始化,所以还是会遇到404的问题,为此我们只需做一个小调整,将不匹配路径(* & # 39;)跳404次的路由从初始路由中移除,动态更新路由时再把这个配置加进去,如下:
let userPath =,…//我们的动态路由//注入时拼接404处理路由
这个。router.addRoutes美元(userPath.concat ([{
,路径:& # 39;* & # 39;
,重定向:& # 39;/404 & # 39;
}));
