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

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

}

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

赞 (0)

相关推荐

  • 基于iview-admin实现动态路由的示例代码

    iview-admin是一个基于vue和iview组件库实现的管理后台前端,本文基于iview-admin最新版本,实现基于权限的动态路由加载. 本文代码可参见:https://github.com/MayBeWrong/iview-admin-dynamic-router 背景: 动态路由:vue的路由,可通过new Router传入路由数组定义实现,也可以通过router.addRoutes实现.通过router.addRoutes动态传入路由定义的方式,称之为动态路由.路由数据可以全部保存

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

    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', nam

  • vue iview实现动态路由和权限验证功能

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标 客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础 基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为 iview-admin 的基础框架代码.项目地

  • Spring Boot Admin 动态修改日志级别的方法步骤

    [前言] 之前关于线上输出日志一直有个困惑:如何可以动态调整的日志级别,来保证系统在正常运行时性能同时又能在出现问题时打印详细的信息来快速定位问题:最近研究一下Spring Boot Admin中动态日志级别调整,并集成项目中,在此与大家共享: [动态修改日志级别]          一.生产环境日志输出的状况 1.生产环境日志输出的困惑 A.设置日志输出级别为info: (1)优点:可以详细的打印日志,有利于排错: (2)缺点:日志消耗系统的性能较大:只能针对整个系统整体设置日志输出较多,定位

  • Linux程序运行时加载动态库失败的解决方法

    Linux下不能加载动态库问题 当出现下边异常情况 ./test: error while loading shared libraries: libmfs_open.so: cannot open shared object file: No such file or directory 若动态库的路径在(/usr/cluster/.share/lib) 解决办法: 方法一.在/etc/ld.so.conf文件中添加路径,vi /etc/ld.so.conf 添加下边内容 include ld

  • Vue 配合eiement动态路由,权限验证的方法

    1.要实现动态路由,只需要在main.js中将所有路由表先规定好,如下 const routes=[ {path:'/login',component:login},/*登录*/ {path:'/home',component:home},/*首页*/ {path:'/monitor',component:monitor},/*实时监控*/ {path: "/orderQuery", component: orderQuery},/*电子围栏*/ {path: "/fence

  • 详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上.因此在设置好路由规则后,为html页面的a标签设置href路由链接切换不同的视图.Angular1.6版本之前通常有href="#..."或href="#/..."这两种写法,结果这两种写法在Angular1.6中没有任何反应. 结果查看了下浏览器地址栏,默认视图链接竟然显示"#!/..",是的,中间多加了个!号. AngularJS升级

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue中使用iview自定义验证关键词输入框问题及解决方法

    一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

随机推荐