解决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 MD4
Dec 20 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 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
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python将时分秒转换成秒的实例
2019/12/07 Python
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
班组长岗位职责范本
2014/01/05 职场文书
小学教研工作制度
2014/01/15 职场文书
小学生检讨书大全
2014/02/06 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
请假条怎么写
2014/04/10 职场文书
具结保证书范本
2015/05/11 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
《三国志》赏析
2019/08/27 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Golang连接并操作MySQL
2022/04/14 MySQL