Vue Router 实现动态路由和常见问题解决方案

何为动态路由

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

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

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

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

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

使用到的功能特性

Vue Router 全局前置守卫

官网解释

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

Vue Router router.addRoutes 实例方法

官网解释

router.addRoutes 方法可以为 Router 实例动态添加路由规则，刚好为我们实现动态路由提供了注入方法。

Vue Router 路由懒加载

官网解释

懒加载这个功能不是动态路由的必要功能，但既然提供了这一特性，所以就直接在项目中使用了。

具体思路

基础信息准备

前端代码实现基本静态路由，例如：登录页路由，服务器错误页路由等（这里有一个坑，后面讲）