vue的路由映射問題及解決方案
今天在項(xiàng)目中遇到了一個問題，明明在Router文件夾下的路由js映射文件中，配置好了，如下：
// 生日賀卡
{ path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')}
然后我是通過進(jìn)入home頁面，點(diǎn)擊一個圖標(biāo)，進(jìn)入到這個生日賀卡頁面，路徑如下：
const tmpConfig = [
{ funcName: '生日賀卡', link: '/home/0/work/birthdayRemind/BirthdayRemind', icon: require('../../assets/img/home/toolbar1.png') },
];
然后整個文件路徑如下圖所示：
然后，路徑啥的都有，結(jié)果死活進(jìn)入不了BirthdayRemind.vue頁面
解決問題
搞了挺久，最后同事告訴我，原來是圖標(biāo) link 屬性的路徑寫錯了，正確是這樣寫的：
const tmpConfig = [
{ funcName: '生日賀卡', link: '/home/0/work/birthdayRemind', icon: require('../../assets/img/home/toolbar1.png') },
{ funcName: '應(yīng)用中心', link: '/home/0/work/appCenter', icon: require('../../assets/img/home/toolbar1.png') },
];
是不是覺得很奇怪，明明具體的文件路徑為：link: ' /home /0 / work / birthdayRemind / BirthdayRemind ',卻報錯，而寫該文件的上一層文件夾路徑（link: '/ home/0/work/birthdayRemind），卻寫對了？
分析問題
我想了一下，其實(shí)還是蠻有道理的，因?yàn)樵赗outer的路由映射js當(dāng)中，Router首先是從path屬性開始查找，找到對應(yīng)的path，就會load具體的路徑。例如上面的 link: '/home/0/work/birthdayRemind'，Router就會在vue的路由映射表中，查找path，path: '/birthdayRemind' 的名字映射，然后就會自動load出具體的vue地址，然后就渲染出來。
而錯誤的寫法是： localhost:8080 / birthdayRemind / BirthdayRemind , 很明顯，路由映射表中，沒有一個path: '/ birthdayRemind / BirthdayRemind' ，所有就渲染不出來了對應(yīng)的vue
因?yàn)楣ぷ黜?xiàng)目的不同，這里的/home/o/work/ 就相當(dāng)于 localhost:8080/ ，相當(dāng)于跟路徑。
總結(jié)：
以后如果想要Router查找到相應(yīng)的vue路徑，只需要 http://localhost:8080 + path ，就能找到并渲染出相應(yīng)的頁面了。
ps：這里的path是在路由映射表中寫的，格式如下：
import Rank from 'components/rank/rank'
export default new Router({
routes: [
// {
// path: '/',
// name: 'Hello',
// component: Hello
// },
{
path: '/',
redirect: '/recommend'
},
{
path: '/rank',
component: Rank
}
]
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))
這篇文章主要介紹了vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue?圖片路徑?“@/assets“?報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue登錄注冊并保持登錄狀態(tài)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了詳解vue修改elementUI的分頁組件視圖沒更新問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue中的計(jì)算屬性computed傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
watch就是當(dāng)值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認(rèn)知時，也需要執(zhí)行函數(shù)2023-01-01
Vue項(xiàng)目部署后提示刷新版本的實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目部署后提示刷新版本的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-06-06
Vue El-descriptions 描述列表功能實(shí)現(xiàn)
這篇文章主要介紹了Vue El-descriptions 描述列表功能實(shí)現(xiàn),Descriptions 描述列表,列表形式展示多個字段,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11