iView-admin 动态路由问题的解决方法


Posted in Javascript onOctober 03, 2018

 IView-admin 在使用的时候

跳转客户详细后,点击其它页面,然后再从选项卡进入页面时,发下控制台 报错,不能正常打开客户详细页面

[vue-router] Route with name 'customer/detail/:id' does not exist

地址栏的地址变为 http://localhost:8080/  正确的地址为 http://localhost:8080/customer/detail/150

路由器配置如下

{

  path: 'detail/:id',

  name: 'customer/detail',

  meta: {

   title: '客户详细',

   hideInMenu: true

  },

  component: () => import('@/view/customer/detail/detail.vue')

}

最后找到原因是,IView-admin 路由跳转使用的是

turnToPage (name) {

 if (name.indexOf('isTurnByHref_') > -1) {

  window.open(name.split('_')[1])

  return

 }

 this.$router.push({

  name: name

 })
},

采用 this.$router.push({name: name}) 来跳转

在浏览器的Local Storage里发现是这样存储的

{"name":"customer/detail","path":"/customer/detail/150","meta":{"title":"客户详细","hideInMenu":true}}

name 上边没有客户详细的ID信息,所以跳转的时候出现了问题。

现将 mian.vue truenToPage 下新增代码,采用this.$router.push({path: path})方式来跳转

turnToPagePath (path) {

 if (name.indexOf('isTurnByHref_') > -1) {

  window.open(name.split('_')[1])

  return

 }

 this.$router.push({

  path: path

 })
},

然后修改 main.vue handleClick 部分代码

handleClick (item) {

 // this.turnToPage(item.name)

 this.turnToPagePath(item.path)

}

问题解决

由此引发了新问题

从列表打开id为150的客户信息,再从列表打开id为140的客户信息。从别的页面点选项卡跳转到客户详细页面 发现还是进入到 150的客户信息,而不是最新 140的客户信息

解决方法,修改 util.js 

之前的代码

export const getNewTagList = (list, newRoute) => {

 const { name, path, meta } = newRoute

 let newList = [...list]

 if (newList.findIndex(item => item.name === name) >= 0) return newList

 else newList.push({ name, path, meta })

 return newList

}

修改后的代码 

export const getNewTagList = (list, newRoute) => {

 const { name, path, meta } = newRoute

 let newList = [...list]

 let _index = newList.findIndex(item => item.name === name)

 if (_index >= 0) {

  if (newList[_index].path !== path) {  // 如果name已经存在,判断path值

   newList[_index].path = path      // 如果不一样,修改path值

  }

  return newList

 } else newList.push({ name, path, meta })

 return newList

}

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
jquery中动态效果小结
Dec 16 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
微信小程序select下拉框实现效果
May 15 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
Angular resolve基础用法详解
Oct 03 #Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 #Javascript
angular.js实现列表orderby排序的方法
Oct 02 #Javascript
Angularjs实现数组随机排序的方法
Oct 02 #Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 #Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 #Javascript
angular ng-model 无法获取值的处理方法
Oct 02 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
loading动画特效小结
2017/01/22 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
AngularJS实现进度条功能示例
2017/07/05 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python处理PDF与CDF实例
2020/02/26 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers