这篇文章主要介绍Vue路由器实现动态路由的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
个人理解:动态路由不同于常见的静态路由,可以根据不同的“因素”而改变站点路由列表。常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单。
<>强如何利用Vue路由器实现动态路由强>
<代码> Vue> 代码项目实现动态路由的方式大体可分为两种:
- <李>
前端将全部路由规定好,登录时根据用户角色权限来动态展示路由;
李> <李>路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染;
李>第一种方式在很多Vue UI管理<代码> 代码>上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开第。二种方式现在来说也比较常见了,因为近期项目正好用到所以单独讲一下,这里我使用的方案是利用Vue路由器<代码> 代码>的一些特性实现后端主导的动态路由。
<强>使用到的功能特性强>
<强> Vue路由器全局前置守卫强>
官网解释
这里我们主要借助全局前置守卫的“前置“特性,在页面加载前将当前用户所用到的路由列表注入到路由器<代码> 代码>实例中,注入使用到的方法则是下面的<代码>路由器。addRoutes 代码>方法。
<强> Vue路由器路由器。addRoutes实例方法强>
官网解释
<代码>路由器。addRoutes 代码>方法可以为路由器<代码> 代码>实例动态添加路由规则,刚好为我们实现动态路由提供了注入方法。
<强> Vue路由器路由懒加载强>
官网解释
懒加载这个功能不是动态路由的必要功能,但既然提供了这一特性,所以就直接在项目中使用了。
<强>具体思路强>
<>强基础信息准备强>
前端代码实现基本静态路由,例如:登录页路由,服务器错误页路由等(这里有一个坑,后面讲)。数据库存储全部动态路由信息。
数据库如何存储动态路由信息?我选择的方案是现将路由引用的对象字符串化,再将路由列表转化为JSON <代码> 代码>格式传输给后端,经后端处理后存储到数据库里。总之在前后端进行传递的是JSON <代码> 代码>格式的路由列表信息。
如何将路由中引用的对象字符串化?我遇到的实际问题是:使用的UI <代码> 代码>组件提供了布局方案,需要引用布局组件并在子路由处引用具体页面。我选择的解决方案是:区别对待需要引用布局组件的<代码> 代码>组件属性,使用简短字符串代替布局组件,使用文件路径字符串代替页面引入。具体实现可以看后面的代码实例。
<>强利用全局前置守卫对路由信息进行判断强>
1 -判断用户是否登录1.1 -若未登录,跳转至登录页面1.2 -若已经登录,判断是否已获取路由列表1.2.1——若未获取,从后端获取,解析并保存到<代码> Vuex> 代码中1.2.2——若已获取,跳转至目标页面
这里我没做太多考察,直接将取到数据存储到了<代码> Vuex> 代码中,在实际项目应用的过程中应考虑数据存储的安全性。
如何实现路由列表解析?
- <李>
将JSON <代码> 代码>格式的路由信息解析为JavaScript <代码> 代码>列表对象,
李> <李>利用列表对象的<代码> 代码>方过滤法实现解析函数,通过<代码> 代码>组件判断是否为布局组件;
李> <李>若为布局组件,使用布局组件代替<代码>组件> 代码字符串;
李> <李>若为具体页面,使用<代码> 代码>未经函数加载对应的具体页面;
李> <李>利用路由器。addRoutes方法动态添加路由
李>这一步就很简单了,将解析好的路由列表通过<代码>路由器。addRoutes 代码>方法添加到路由器<代码> 代码>实例中即可。
简单的实现代码
//,/index.js路由器 import Vue 得到& # 39;vue # 39; import store 得到& # 39;@/商店# 39; import Router 得到& # 39;vue-router& # 39; {},getToken  import 得到& # 39;@/lib/util # 39; Vue.use(路由器)//,定义静态路由 const staticRoutes =, ( ,{ ,路径:& # 39;/登录# 39; ,名字:& # 39;登录# 39; ,元:{ 标题:大敌;& # 39;登录页面& # 39;, ,hideInMenu:真的 }, 组件:大敌;(),=祝辞,进口(& # 39;@/视图/登录/login.vue& # 39;) }, ,{ ,路径:& # 39;/401 & # 39; ,名字:& # 39;error_401& # 39; ,元:{ ,hideInMenu:真的 }, 组件:大敌;(),=祝辞,进口(& # 39;@/视图/页面偷走了/401. vue # 39;) }, ,{ ,路径:& # 39;/500 & # 39; ,名字:& # 39;error_500& # 39; ,元:{ ,hideInMenu:真的 }, 组件:大敌;(),=祝辞,进口(& # 39;@/视图/页面偷走了/500. vue # 39;) ,} ]//,定义登录页面名称(为了方便理解才定义的) const LOGIN_PAGE_NAME =, & # 39;登录# 39;//,实例化,Router 对象 const router =, new 路由器({ staticroute, 模式:大敌;& # 39;历史# 39; })//,定义全局前置守卫(里面有两个坑要注意) router.beforeEach(下),,,,,=祝辞,{ ,//通过自定义方法获取用户,token 用来判断用户登录状态 ,const token =, getToken () ,if (! token ,,, to.name !==, LOGIN_PAGE_NAME), { ,//如果没有登录而且前往的页面不是登录页面,跳转到登录页 ,下一个({,名字:LOGIN_PAGE_NAME }) ,}else if (! token ,,, to.name ===, LOGIN_PAGE_NAME), { ,//如果没有登录而且前往的页面是登录页面,跳转到登录页面 ,//这里有一个坑,一定要注意这一步和上一步得分开写 ,//如果把前两步判断合并为,if (令牌),下一个({,名字:login }) ,//则会形成登录页面无限刷新的错误,具体成因后面解释 下(), ,}else { ,//如果登录了 ,if (! store.state.app.hasGetRoute), { ,//如果没有获取路由信息,先获取路由信息而后跳转 ,store.dispatch (& # 39; getRouteList& # 39;),然后((),=祝辞,{ ,router.addRoutes (store.state.app.routeList) ,//这里也是一个坑,不能使用简单的,下一个() ,//如果直接使用,下一个(),刷新后会一直白屏 ,下一个({,…,取代:,true }) ,}) ,}else { ,//如果已经获取路由信息,直接跳转 下(), ,} ,} }) export default 路由器Vue路由器实现动态路由的示例分析