解决vue addRoutes不生效问题


Posted in Javascript onAugust 04, 2020

动态添加导航栏时,addRoutes不生效解觉

1、在addroutes前,使用router.options.routes=XXXXX的方法手动添加

2、使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏

解决vue addRoutes不生效问题

补充知识:vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决

起因

在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-router 的 addRoutes() 方法动态添加到路由表中

遇到的问题

项目目录

...
router
index.js // 路由主配置,路由守卫等
routers.js // 存放页面整体布局和无需权限的路由
store
modules
app.js // 项目通用vuex状态、mutation action等模块
user.js // 用户模块的
index.js // vuex  store的主入口

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers' // 导出了路由配置数组项
Vue.use(Router)
const router = new Router({
routers,
mode: 'history'
})
export default router

store/modules/app.js

import router from '@/router' // @ 是src目录, 拿到路由对象
....
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由
```

此时,如上配置动态路由已经配置完成, 项目也能跑起来,控制台也不会报错和警告,感觉everything is so perfect. 但是在退出登录后,重新登录,打开控制台, 满满的黄色警告 如图

解决vue addRoutes不生效问题

意思就是路由发生了冲突, 这是因为addRoutes 给路由表中添加路由,当退出登录的时候vue实例并木有重新初始化,但是却重新又addRoutes了一次,如果登录的用户相同或者不同用户有同样的权限路由, 那么就会被直接在原来路由表基础上添加,那么自然就会发生路由冲突了,而此时如果刷新页面,vue实例重新初始化就没有这些警告,

问题来了

vue-router 只提供了addRoutes方法 却并没有提供 removeRoutes方法,那么该如何解决这个冲突呢?

解决方式

经过一番搜索与实践,找到了一种方式 , 重置router的matcher

首先修改router/idnex.js

// 原来的
const router = new Router({
routes,
mode: 'history'
})
export router
// 修改为
export const createRouter = (routers) => new Router({
routers,
mode: 'history'
})
const router = createRouter(routers)
export router

其次修改store/modules/app.js

// 原来的
import router from '@/router'
....
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由
// 修改为
import router, { createRouter } from '@/router'
import routers from '@/router/routers' // 无需配置的那些路由
...
router.matcher = createRouter(routers).matcher
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由, 在更新菜单menuList前调用
```

如此按照以上的方式即可解决这个问题

以上这篇解决vue addRoutes不生效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
js转html实体的方法
Sep 27 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
JS实现放烟花效果
Mar 10 Javascript
详解vue组件之间的通信
Aug 30 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
详解JS深拷贝与浅拷贝
Aug 04 #Javascript
vue addRoutes路由动态加载操作
Aug 04 #Javascript
You might like
windows xp下安装pear
2006/12/02 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python中的sort方法使用详解
2014/07/25 Python
python操作CouchDB的方法
2014/10/08 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
护理不良事件检讨书
2014/02/06 职场文书
目标管理责任书
2014/04/15 职场文书
赡养老人协议书
2014/04/21 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
办理护照工作证明
2014/10/10 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
接待员岗位职责范本
2015/04/15 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书