vue后台项目如何使用router.addRoutes动态加入路由的思路

台路由需求

根据用户权限获取菜单（也就是路由信息），动态加载到路由当中，实现正常路由切换。

1、最开始的实现方式

用户登录—>接口获取当前用户的菜单信息—>格式化菜单信息（格式化成，路由格式）—>使用router.addRoutes动态加入路由。

实现结果：

路由添加成功，并且能正常的跳转。但是，当我刷新页面后页面路由出错了，直接进入了错误页面404。

问题原因：

vue在初始化的时候，vue-router的实例对象已经生成了，当前路由只包含了如登录页和404等静态页面，用户权限获取的路由需要在登录成功后单独请求权限接口再动态添加到路由当中，所以页面在刷新的时候页面会找不到对应动态的路由。

2、当前的问题在于刷新后

vue和vue-router重新初始化会跳过权限接口的请求和添加动态路由。

本人也卡在这个地方一下午，后面看了网上的处理方式和代码，也整理了一份适应自己项目的处理方式。

最终的思路

在路由的导航守卫router.beforeEach中判断当前是页面刷新还是路由切换，利用vuex的状态值在页面刷新就会重新初始化的特新和本地缓存localStorage存的登录状态值来判断页面刷新还是路由切换。

整体的实现方式如下:

最终的实现方式

注意点：我在vuex中缓存了用户权限的接口返回的数据，可以根据需要存放在本地还是vuex都是可以的

1、用户登录—> 本地缓存用户token和id

vuex中存入登录用户id（存的具体那个值,对还是错都不重要，值只是用来判断页面刷新还是路由切换，随意存。。只是用于后续的判断） —>接口获取当前用户的菜单信息—>格式化菜单信息（格式化成，路由格式）—>使用router.addRoutes动态加入路由。

2、在导航守卫router.beforeEach的方法中

进入路由后，判断

• 1、本地缓存的token是否有值，没有的话，说明用户没有登录过，直接跳转登录页面
• 2、token值有的，vuex中的用户id存在的话，页面只是路由切换，用next让路由正常流转下去
• 3、token值有的，vuex中的用户id的值不存在的话，说明页面刷新了，这个时候需要做两个件事情，

A：设置vuex中的id的为本地缓存的用户id ，

B：重新请求权限接口，格式化后，动态添加到路由，然后重新用next实现接下来的路由跳转，这里需要注意，请求的权限接口需要用async/wait 改成同步接口方便使用。

步骤1具体代码如下图所示：

• 其中标的数字1标示的是：本地缓存用户token和id，
• 标的数字2的是：vuex中存入登录用户id，
• 标数字3是：，接口请求后，格式化后，并使用router.addRoutes动态加入路由

步骤2的代码实现方式如下图所示：

• 其中标注的1是：判断本地token的值，没有token的话，直接跳转登录页面，
• 标注2是：token值有的，vuex中的用户id存在的话，页面只是路由切换，用next让路由正常流转下去 ，
• 标注3：token值有的，vuex中的用户id的值不存在的话，说明页面刷新了，这个时候需要做两个件事情，

A：设置vuex中的id的为本地缓存的用户id ，

B：重新请求权限接口，格式化后，动态添加到路由，然后重新用next实现接下来的路由跳转

下图是管理vuex中的栏目的，前面说了，可以更具使用情况，缓存本地还是vuex中，只是存放的地方和路由的格式化，路由的格式化，需要根据需要自己格式化

总结

1、vue项目在初始化后，vue-router的实例后生成的路由只包含静态路由，就是那些写死的路由

2、动态路由添加本人认为最核心的不是router.addRoutes，这个大家都会，是如何判断当前页面是路由切换还是页面刷新，

上面已经说了思路，也有代码，可以多试试

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论