如何解决iView-admin动态路由问题

发布时间:2021-07-21 10:15:25 作者:小新
来源:亿速云 阅读:121

这篇文章将为大家详细讲解有关如何解决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

}

关于“如何解决iView-admin动态路由问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. iview-admin 动态菜单
  2. iview-admin 2.5.0 登录

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

iview admin

上一篇:C语言的概念和特点是什么

下一篇:NodeJs中如何使用Mocha测试框架

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》