快捷導(dǎo)航

vue的路由映射問(wèn)題及解決方案

更新時(shí)間：2019年10月14日 10:45:24 作者：彭勝光

這篇文章主要介紹了vue的路由映射問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

今天在項(xiàng)目中遇到了一個(gè)問(wèn)題，明明在Router文件夾下的路由js映射文件中，配置好了，如下：

// 生日賀卡
 { path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')}

然后我是通過(guò)進(jìn)入home頁(yè)面，點(diǎn)擊一個(gè)圖標(biāo)，進(jìn)入到這個(gè)生日賀卡頁(yè)面，路徑如下：

const tmpConfig = [
 { funcName: '生日賀卡', link: '/home/0/work/birthdayRemind/BirthdayRemind', icon: require('../../assets/img/home/toolbar1.png') },
];

然后整個(gè)文件路徑如下圖所示：

然后，路徑啥的都有，結(jié)果死活進(jìn)入不了BirthdayRemind.vue頁(yè)面

解決問(wèn)題

搞了挺久，最后同事告訴我，原來(lái)是圖標(biāo) link 屬性的路徑寫(xiě)錯(cuò)了，正確是這樣寫(xiě)的：

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') },
];

是不是覺(jué)得很奇怪，明明具體的文件路徑為：link: ' /home /0 / work / birthdayRemind / BirthdayRemind ',卻報(bào)錯(cuò)，而寫(xiě)該文件的上一層文件夾路徑（link: '/ home/0/work/birthdayRemind），卻寫(xiě)對(duì)了？

分析問(wèn)題

我想了一下，其實(shí)還是蠻有道理的，因?yàn)樵赗outer的路由映射js當(dāng)中，Router首先是從path屬性開(kāi)始查找，找到對(duì)應(yīng)的path，就會(huì)load具體的路徑。例如上面的 link: '/home/0/work/birthdayRemind'，Router就會(huì)在vue的路由映射表中，查找path，path: '/birthdayRemind' 的名字映射，然后就會(huì)自動(dòng)load出具體的vue地址，然后就渲染出來(lái)。

而錯(cuò)誤的寫(xiě)法是： localhost:8080 / birthdayRemind / BirthdayRemind , 很明顯，路由映射表中，沒(méi)有一個(gè)path: '/ birthdayRemind / BirthdayRemind' ，所有就渲染不出來(lái)了對(duì)應(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)的頁(yè)面了。

ps：這里的path是在路由映射表中寫(xiě)的，格式如下：

import Rank from 'components/rank/rank'
 
 
export default new Router({
 routes: [
  // {
  //  path: '/',
  //  name: 'Hello',
  //  component: Hello
  // },
  {
   path: '/',
   redirect: '/recommend'
  },
  {
   path: '/rank',
   component: Rank
  }
 ]
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: