亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法

 更新時(shí)間:2018年01月25日 11:49:30   作者:逍遙云天  
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

解決vue-router嵌套路由(子路由)在history模式下刷新無(wú)法渲染頁(yè)面的問(wèn)題,具體內(nèi)容如下

一. 異常描述

本來(lái)使用的是vue-router的hash模式,但是hash模式下url需要帶“#”符號(hào),不僅看起來(lái)不舒服,而且有些場(chǎng)景下是會(huì)破壞路由中的"#"(微信分享頁(yè)面就會(huì)把"#"后邊的內(nèi)容處理掉),所以就需要使用history模式,然后就讓后端改下nginx配置:

location / { try_files $uri $uri/ /index.html; }

vue-router使用history模式+使用嵌套路由:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……

  //我的銀行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

訪問(wèn)路由和嵌套路由頁(yè)面,顯示正常,但是刷新頁(yè)面的時(shí)候,嵌套路由頁(yè)面就出異常了:

頁(yè)面樣式全亂了,看下頁(yè)面請(qǐng)求加載的靜態(tài)文件,所有靜態(tài)文件都是404;

二. 異常解析

1. 看下官方文檔對(duì)嵌套路由的說(shuō)明:

2. 再看之前的異常頁(yè)面,看來(lái)我們的父路由成了根目錄了看下文件路徑了:

3. 看下我們引入這些異常文件,是在index.html文件中直接引用的,也就是在根路徑下引入的。之前的hash模式下,根路徑是不會(huì)變的,所以我們?cè)趇ndex.html文件中直接引入這些靜態(tài)文件,是可行的,但是使用history模式后,根路徑就不固定了。那么這種引入方式就不可行了,所以才造成了上邊出現(xiàn)的頁(yè)面無(wú)法渲染的問(wèn)題:

三. 解決問(wèn)題

這里有點(diǎn)尷尬,先考慮的主Vue中以Import的方式引入靜態(tài)樣式文件,的確可行,但是最后發(fā)現(xiàn),直接修改index.html文件中的靜態(tài)文件引入路徑就OK了:

修改前:

<script src="./static/js/stomp.js"></script>

修改后

<script src="/static/js/stomp.js"></script>

四. 原理

./ 是指用戶所在的當(dāng)前目錄(相對(duì)路徑);

/ 是指根目錄(絕對(duì)路徑,項(xiàng)目根目錄),也就是項(xiàng)目根目錄;

對(duì)于hash模式,根路徑是固定的,就是項(xiàng)目的根目錄,但是history模式下,以/開(kāi)頭的嵌套路徑會(huì)被當(dāng)作根路徑,所以使用“./”引入文件,就會(huì)找不到文件了,因?yàn)槲募旧砭褪窃陧?xiàng)目根目錄下的,并不在嵌套路徑這個(gè)目錄下。

總結(jié),無(wú)論hash模式還是history模式,可以直接使用“/”從項(xiàng)目根目錄引入靜態(tài)文件。

PS:之前一段時(shí)間就遇到過(guò)這個(gè)問(wèn)題,百度了好久,發(fā)現(xiàn)很少有人問(wèn)這個(gè)問(wèn)題,有一個(gè)也沒(méi)人回答。也問(wèn)了好些前端大神,還是沒(méi)能解決這個(gè)問(wèn)題。也許是平時(shí)寫慣了“./” 和“../”這些開(kāi)頭的路徑了吧,并沒(méi)有注意到靜態(tài)文件引入方式的問(wèn)題,折騰了好些方法,最后很尷尬的發(fā)現(xiàn),其實(shí)問(wèn)題很簡(jiǎn)單,只是對(duì)框架的底層了解不透徹罷了!

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

相關(guān)文章

最新評(píng)論