使用vue-cli搭建的環(huán)境，在配置好路由之后，可以看到下面的情況：

但是不難發(fā)現(xiàn)#的出現(xiàn)真的很丑陋，并且也不知道這是什么作用？

所以就去Stack Overflow上搜索了，果然還有~  看來(lái)Stack Overflow是真的強(qiáng)大，你在項(xiàng)目中遇到的問(wèn)題實(shí)際上在so上都已經(jīng)被問(wèn)過(guò)并且解決了，這不： 　  　　

這是最高票的回答，即在vue2中將mode模式設(shè)置為history，試過(guò)之后確實(shí)奏效！

但是知道這樣可以解決問(wèn)題，卻不知道為什么，這是不行的，　隨著連接，我們看到了文檔。

所以這篇文章也就是引申到文檔的理解了，大家可以直接去看文檔?！?/p>

對(duì)于vue開(kāi)發(fā)的單頁(yè)面應(yīng)用，我們?cè)谇袚Q不同的頁(yè)面的時(shí)候，可以發(fā)現(xiàn)html永遠(yuǎn)只有一個(gè)，這也真是稱之為單頁(yè)面的原因，而vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。因?yàn)閷?duì)于正常的頁(yè)面來(lái)說(shuō)，更換url一定是會(huì)導(dǎo)致頁(yè)面的更換的， 而只有更換url中的查詢字符串和hash值得時(shí)候才不會(huì)重新加載頁(yè)面。 這里也就是這個(gè)道理。

但是#這種形式真的很丑！  所以，如果不想要，可以使用路由的history模式?。?！ 這種模式充分利用了history.pushState API來(lái)完成URL的跳轉(zhuǎn)而不需要重新加載頁(yè)面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

使用這種模式之后，就沒(méi)有#了，而是可以像使用正常的url進(jìn)行訪問(wèn)了。 　　

不過(guò)這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。

所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。

注意：目前我所做的項(xiàng)目的后端沒(méi)有支持此種方式，所以還是先使用#的方式進(jìn)行開(kāi)發(fā)。

警告

給個(gè)警告，因?yàn)檫@么做以后，你的服務(wù)器就不再返回 404 錯(cuò)誤頁(yè)面，因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個(gè) 404 頁(yè)面。

const router = new VueRouter({
 mode: 'history',
 routes: [
 { path: '*', component: NotFoundComponent }
 ]
})

或者，如果你是用 Node.js 作后臺(tái)，可以使用服務(wù)端的路由來(lái)匹配 URL，當(dāng)沒(méi)有匹配到路由的時(shí)候返回 404，從而實(shí)現(xiàn) fallback。

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

最新評(píng)論