【已解決】 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
}