在vue路由结构中如何实现动态添加路由

本篇文章给大家分享的是有关在vue路由结构中如何实现动态添加路,由小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>动态添加路由基本功能

让路线=[{路径:& # 39;/登录# 39;,名字:& # 39;登录# 39;,组件:()=比;进口(& # 39;. ./组件/Login.vue& # 39;)})

。美元router.addRoutes(路线)

<强>涉及多层路由嵌套如图

单纯使用addRoutes层级结构不同

<强>修改路由结构

例:

{ 　　名称:& # 39;账户# 39; 　　路径:& # 39;/账户/账户# 39; 　　元:{ 　　标题:& # 39;个人中心& # 39;, 　　requireAuth:真 　　}， 　　组件:账户, 　　孩子:( 　　{ 　　名称:& # 39;账户# 39; 　　路径:& # 39;/账户/账户# 39; 　　元:{ 　　标题:& # 39;账号设置& # 39;, 　　requireAuth:真 　　}， 　　组件:setAccount, 　　}， 　　{ 　　名称:& # 39;childMgt& # 39; 　　路径:& # 39;/账户/childMgt& # 39; 　　元:{ 　　标题:& # 39;子账号管理& # 39;, 　　requireAuth:真 　　}， 　　组件:childMgt, 　　}， 　　 　　] 　　},

<>强修改单一结构

{ 　　名称:& # 39;账户# 39; 　　路径:& # 39;/账户/账户# 39; 　　元:{ 　　标题:& # 39;个人中心& # 39;, 　　requireAuth:真 　　}， 　　组件:账户, 　　孩子:( 　　{ 　　名称:& # 39;账户# 39; 　　路径:& # 39;/账户/账户# 39; 　　元:{ 　　标题:& # 39;账号设置& # 39;, 　　requireAuth:真 　　}， 　　组件:setAccount, 　　}， 　　] 　　}， 　　{ 　　名称:& # 39;账户# 39; 　　路径:& # 39;/账户/childMgt& # 39; 　　元:{ 　　标题:& # 39;个人中心& # 39;, 　　requireAuth:真 　　}， 　　组件:账户, 　　孩子:( 　　{ 　　名称:& # 39;userMgt& # 39; 　　路径:& # 39;/账户/childMgt& # 39; 　　元:{ 　　标题:& # 39;子账号管理& # 39;, 　　requireAuth:真 　　}， 　　组件:childMgt, 　　}， 　　] 　　},

每一层单独包含一个子集合方便权限管理动态添加

<强>主要。js

路由器。beforeEach(下),从=比;{ 　　如果(from.name==null){//页面刷新 　　让路径名=sessionStorage.getItem (“pathName")//暂存上一个路由 　　如果路径名==to.path | |路径名==to.redirectedFrom) { 　　其他}{ 　　sessionStorage.setItem (“pathName" to.redirectedFrom) 　　} 　　其他}{ 　　sessionStorage.setItem (“pathName" to.path) 　　} 　　next () 　　})

<强>应用程序。vue

 
 
 
。美元outer.push(& # 39;回家# 39;)//会重复添加路由信息进入路由记录
 
。美元outer.replace(& # 39;回家# 39;)//会替换之前的路由记录
  
 
。美元outer.replace(& # 39;回家# 39;)//跳转页面推荐用这个
  
以上就是在vue路由结构中如何实现动态添加路,由小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
在vue路由结构中如何实现动态添加路由