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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
微信小程序实现点赞业务
Feb 10 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处理复杂xml数据示例
2016/07/11 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
php面向对象重点知识分享
2019/09/27 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
大学校庆策划书
2014/01/31 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
公司年会策划方案
2014/05/17 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
react 项目中引入图片的几种方式
2021/06/02 Javascript
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers