vue动态增加路由addRoutes之不能将动态路由存入缓


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

在我不知道vue的路由还能够经由过程addRoutes动态增加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载响应的路由。直到在一个新公司接到需要根据用户的权限显现分歧的菜单的需求时才知道了本来vue-router另有一个addRoutes的API,立马研讨了一下。

router.addRoutes:

函数署名:

router.addRoutes(routes: Array<RouteConfig>)

动态增加更多的路由划定规矩。参数必需是一个相符routes选项要求的数组。

点这里去看router.addRoutes的官方诠释

文言就是需要动态加入到路由表中的路由是必需要跟我们提早写死的路由划定规矩是一样的。

有了这个玩艺儿我们就能够根据系统管理员给用户分派的权限来完成分歧的用户能够进入分歧的菜单页面的功用,是否是很nice?是否是很优异?

但这个还不是本文的重点,本文的重点是“不能将需要动态增加的路由存入缓存!” 为何这么说呢?

先说说我们的需求吧。

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。-

我们的项目开辟中的动态路由是提早配幸亏路由表中的,只是和静态路由离开写在了两个工具中,导出的时刻默许只导出静态路由,所谓的静态路由就是一切用户都能够接见到的大众路由,好比登录页面、404页面等。而分歧用户可接见分歧的菜单页面是根据接口返回的一个菜单code来过滤提早配好的动态路由(提早配好的动态路由中也有一个code),再将过滤后的路由运用router.addRoutes动态增加便可。能够有些公司是经由过程接口直接把用户的动态路由表依照路由的划定规矩情势给返回了出来,前端只需拿到路由表稍作处置惩罚然后addRoutes就能够了。每一个公司有每一个公司的设法主意,你高兴就好!

接下来就是我们项目中的路由过滤了,这里省略1000字,路由过滤完成并动态增加后就能够很兴奋的接见菜单页面了。但我想的是,在全局路由守御中要求接口返回的code(这里接口返回的是一个包罗code和其他数据的json数组,以是我还得先把接口返回的code给过滤出来),然后再过滤路由,然后再动态增加,这对机能来说是一个不小的开支,以是我就揣摩着能不能把初次过滤好的路由给存在缓存中,如许下次就能够直接动态增加缓存中的路由了,岂不是是一件很优美的事变,结果是我想错了,你们都想错了!

来先看看过滤后打印出来的路由吧:

再来看看从缓存中读出来的路由吧:

从两张图上赤色矩形圈圈能够看出,从缓存中读出来的路由信息已发生了转变,父路由中的render要领也没有了(第一张图中父路由的render要领照样有的,到了第二张就没有了),且子路由children里边已没有了component属性(从第二张图中的赤色箭头处能够看出),这明显不是我们想要的路由信息。有人说能够运用import xxx from ‘xxx’来替换component的值,这个针对父路由的component都引用了同一个Layout组件来说是能够的,然则子路由呢?从缓存中读出来的子路由连component都没有了,即使是有这个属性,但子路由都引用了分歧的component,那你怎样玩?何况将过滤后的路由信息经由过程缓存的存取来完成,平安上就会有题目,由于若是户手动修改了缓存里的路由,那你所谓的动态路由权限岂不是立马破功了。

以是,我们能做的就只能是在每次切换路由时都要从新要求接口并根据返回的code来动态过滤路由并增加,或许根据后端返回的动态路由表直接增加,机能上糟蹋一点也是没有办法的事儿,总比完成不了或不平安来的更好一点。

写了这么多,若是列位前端偕行看的不是很邃晓的话,能够本身着手实验一下,实践是检验真理的唯一标准!

本文参考地点:
https://segmentfault.com/q/1010000009127330

https://segmentfault.com/q/1010000009524078

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。