vue动态添加路由添加路由解决动态路由无法缓存的问题

当我不知道vue路由可以通过addRoutes动态添加时，我只知道vue路由写在路由表中，每次跳转都会加载对应的路由。直到一家新公司收到根据用户权限显示不同菜单的需求，才得知vue-router有一个addRoutes的API，并立即进行了研究。

路由器.添加路由：

函数签名：

添加路由(路由： ArrayRouteConfig)以动态添加更多路由规则。参数必须是满足routes选项要求的数组。

单击此处查看路由器的官方解释。添加路由

通俗地说，需要动态添加到路由表中的路由必须与我们预先编写的路由规则相同。

有了这个小工具，我们可以实现不同用户根据系统管理员分配的权限进入不同菜单页面的功能。好看吗？是不是很棒？

但这不是本文的重点。本文的重点是“您不能将需要动态添加的路由存储在缓存中！”为什么这么说？

先说说我们的需求。

在我们的项目开发中，动态路由是预先在路由表中配置的，但是它是与静态路由分开写在两个对象中的。导出时，默认情况下仅导出静态路线。所谓静态路由就是所有用户都可以访问的公共路由，比如登录页面和404页面。不同的用户可以根据界面返回的菜单代码(预配置的动态路由中也有代码)过滤预配置的动态路由，然后使用router.addRoutes动态添加过滤后的路由，从而访问不同的菜单页面.可能有些公司通过接口直接将用户的动态路由表以路由规则的形式返回，前端只需要拿到路由表做一点处理，然后添加Routes即可。每个公司都有自己的想法，开心就好！

接下来是我们项目中的路由过滤。这里省略了1000字。路由过滤完成并动态添加后，即可愉快地访问菜单页面。但是我想要的是在全局route guard中请求接口返回的代码(这里，接口返回一个包含代码和其他数据的json数组，所以我必须先过滤掉接口返回的代码)，然后过滤路由，再动态添加，对于性能来说是一个很大的开销，所以我想知道我是否可以将第一个过滤的路由存储在缓存中，这样我下次就可以直接在缓存中动态添加路由了。这不是很棒吗？

让我们看看过滤后的打印路线：

让我们看看从缓存中读取的路由：

从两张图中的红色矩形圆圈可以看出，从缓存中读取的路由信息发生了变化，父路由中的渲染方法消失了(父路由的渲染方法在第一张图中仍然存在，但在第二张图中不存在)，子路由的子路由中的组件属性消失了(从第二张图中的红色箭头可以看出)，这显然不是我们想要的路由信息。有人说可以用‘XXX’中的import xxx代替component的值。父路线的这个组件引用同一个布局组件是可以的，但是子路线呢？从缓存中读取的子路由甚至没有组件。即使它们有这个属性，子路由都是引用不同的组件，那么怎么玩呢？而且，如果通过缓存访问过滤后的路由信息，在安全性上会有问题，因为如果用户手动修改缓存中的路由，那么你所谓的动态路由权限不会被立即破坏。

因此，我们所能做的就是在每次切换路由时重新请求接口，并根据返回的代码动态过滤添加路由，或者直接根据后端返回的动态路由表添加路由。没有办法浪费性能，总比无法实现或者不安全要好。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。