iView-admin 動態(tài)路由問題的解決方法
IView-admin 在使用的時候
跳轉(zhuǎn)客戶詳細(xì)后,點擊其它頁面,然后再從選項卡進(jìn)入頁面時,發(fā)下控制臺 報錯,不能正常打開客戶詳細(xì)頁面
[vue-router] Route with name 'customer/detail/:id' does not exist
地址欄的地址變?yōu)?http://localhost:8080/ 正確的地址為 http://localhost:8080/customer/detail/150
路由器配置如下
{ path: 'detail/:id', name: 'customer/detail', meta: { title: '客戶詳細(xì)', hideInMenu: true }, component: () => import('@/view/customer/detail/detail.vue') }
最后找到原因是,IView-admin 路由跳轉(zhuǎn)使用的是
turnToPage (name) { if (name.indexOf('isTurnByHref_') > -1) { window.open(name.split('_')[1]) return } this.$router.push({ name: name }) },
采用 this.$router.push({name: name}) 來跳轉(zhuǎn)
在瀏覽器的Local Storage里發(fā)現(xiàn)是這樣存儲的
{"name":"customer/detail","path":"/customer/detail/150","meta":{"title":"客戶詳細(xì)","hideInMenu":true}}
name 上邊沒有客戶詳細(xì)的ID信息,所以跳轉(zhuǎn)的時候出現(xiàn)了問題。
現(xiàn)將 mian.vue truenToPage 下新增代碼,采用this.$router.push({path: path})方式來跳轉(zhuǎn)
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) }
問題解決
由此引發(fā)了新問題
從列表打開id為150的客戶信息,再從列表打開id為140的客戶信息。從別的頁面點選項卡跳轉(zhuǎn)到客戶詳細(xì)頁面 發(fā)現(xiàn)還是進(jìn)入到 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已經(jīng)存在,判斷path值 newList[_index].path = path // 如果不一樣,修改path值 } return newList } else newList.push({ name, path, meta }) return newList }
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
使用Vue開發(fā)自己的Chrome擴(kuò)展程序過程詳解
這篇文章主要介紹了使用Vue開發(fā)自己的Chrome擴(kuò)展程序過程詳解,瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù),例如阻止廣告,管理密碼,組織標(biāo)簽,改變網(wǎng)頁的外觀和行為等等。,需要的朋友可以參考下2019-06-06Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)
今天小編就為大家分享一篇Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼
本文主要介紹了FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11