淺析vue-router原理-創(chuàng)新互聯(lián)
近期被問(wèn)到一個(gè)問(wèn)題，在你們項(xiàng)目中使用的是Vue的SPA（單頁(yè)面）還是Vue的多頁(yè)面設(shè)計(jì)？
這篇文章主要圍繞Vue的SPA單頁(yè)面設(shè)計(jì)展開(kāi)。 關(guān)于如何展開(kāi)Vue多頁(yè)面設(shè)計(jì)請(qǐng)點(diǎn)擊查看。
vue-router是什么？
首先我們需要知道vue-router是什么，它是干什么的？
這里指的路由并不是指我們平時(shí)所說(shuō)的硬件路由器，這里的路由就是SPA（單頁(yè)應(yīng)用）的路徑管理器。 換句話說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。
那與傳統(tǒng)的頁(yè)面跳轉(zhuǎn)有什么區(qū)別呢？
1.vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑，并將路徑和組件映射起來(lái)。
2.傳統(tǒng)的頁(yè)面應(yīng)用，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的。
在vue-router單頁(yè)面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質(zhì) 就是建立起url和頁(yè)面之間的映射關(guān)系。
至于為啥不能用a標(biāo)簽，這是因?yàn)橛肰ue做的都是單頁(yè)應(yīng)用，就相當(dāng)于只有一個(gè)主的index.html頁(yè)面，所以你寫的標(biāo)簽是不起作用的，必須使用vue-router來(lái)進(jìn)行管理。
vue-router實(shí)現(xiàn)原理
SPA(single page application):單一頁(yè)面應(yīng)用程序，有且只有一個(gè)完整的頁(yè)面；當(dāng)它在加載頁(yè)面的時(shí)候，不會(huì)加載整個(gè)頁(yè)面的內(nèi)容，而只更新某個(gè)指定的容器中內(nèi)容。
單頁(yè)面應(yīng)用(SPA)的核心之一是:
1.更新視圖而不重新請(qǐng)求頁(yè)面;
2.vue-router在實(shí)現(xiàn)單頁(yè)面前端路由時(shí)，提供了三種方式：Hash模式、History模式、abstract模式，根據(jù)mode參數(shù)來(lái)決定采用哪一種方式。
路由模式
vue-router 提供了三種運(yùn)行模式：
● hash: 使用 URL hash 值來(lái)作路由。默認(rèn)模式。
● history: 依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。
Hash模式
vue-router 默認(rèn)模式是 hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)去重新加載。
hash（#）是URL 的錨點(diǎn)，代表的是網(wǎng)頁(yè)中的一個(gè)位置，單單改變#后的部分（/#/..），瀏覽器只會(huì)加載相應(yīng)位置的內(nèi)容，不會(huì)重新加載網(wǎng)頁(yè)，也就是說(shuō) #是用來(lái)指導(dǎo)瀏覽器動(dòng)作的，對(duì)服務(wù)器端完全無(wú)用，HTTP請(qǐng)求中不包括#；同時(shí)每一次改變#后的部分，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄，使用”后退”按鈕，就可以回到上一個(gè)位置； 所以說(shuō)Hash模式通過(guò)錨點(diǎn)值的改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù) 。
History模式
HTML5 History API提供了一種功能，能讓開(kāi)發(fā)人員在不刷新整個(gè)頁(yè)面的情況下修改站點(diǎn)的URL，就是利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面；
由于hash模式會(huì)在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規(guī)則時(shí)，加入"mode: 'history'",這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。
//main.js文件中
const router = new VueRouter({
mode: 'history',
routes: [...]
})另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞名稱：淺析vue-router原理-創(chuàng)新互聯(lián)
本文鏈接：http://m.jiaotiyi.com/article/hdcdh.html