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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
老生常谈js数据类型
Aug 03 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
JS立即执行的匿名函数用法分析
Nov 04 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
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
动态添加js事件实现代码
2009/03/12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
javascript学习之json入门
2016/12/22 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JavaScript使用localStorage存储数据
2019/09/25 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python比较2个xml内容的方法
2015/05/11 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python中entry用法讲解
2020/12/04 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
先进典型发言材料
2014/12/30 职场文书
业务员管理制度范本
2015/08/06 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript