Vue Router 动态路由实现及常见问题有哪些解决策略？

本文共计2738个文字，预计阅读时间需要11分钟。

个人理解：动态路径不同于常见的静态路径，可以根据不同的因素调整站点路径列表。常见的动态路径用于实现：多用户权限系统，不同用户展示不同导航菜单；多用户权限系统，不同用户权限展示不同导航菜单。如何利用？

个人理解：动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。常见的动态路由大都是用来实现：多用户权限系统不同用户展示不同导航菜单。

如何利用Vue Router 实现动态路由

Vue项目实现动态路由的方式大体可分为两种：

• 前端将全部路由规定好，登录时根据用户角色权限来动态展示路由；
• 路由存储在数据库中，前端通过接口获取当前用户对应路由列表并进行渲染；

第一种方式在很多Vue UI Admin上都实现了，可以去读一下他们的源码理解具体的实现思路，这里就不过多展开。第二种方式现在来说也比较常见了，因为近期项目正好用到所以单独讲一下，这里我使用的方案是利用Vue Router的一些特性实现后端主导的动态路由。

使用到的功能特性

Vue Router 全局前置守卫

官网解释

这里我们主要借助全局前置守卫的「前置」特性，在页面加载前将当前用户所用到的路由列表注入到Router实例中，注入使用到的方法则是下面的router.addRoutes方法。