從代碼分析，從頭構(gòu)建一個(gè)vue項(xiàng)目需要理解vue的各個(gè)知識點(diǎn)。

當(dāng)你使用npm創(chuàng)建一個(gè)vue項(xiàng)目之后，首先接觸的就是app.vue。該文件的內(nèi)容也很簡單，最開始就是如下：

最基礎(chǔ)的app項(xiàng)目app文件

從這里就可以看到<router-view/>

而這個(gè)就是大名鼎鼎的前端路由，可以知道，凡是整個(gè)項(xiàng)目都是DOM直出的頁面，我們都稱它為“傳統(tǒng)頁面”（SSR 屬于首屏直出，這里我不認(rèn)為是傳統(tǒng)頁面的范疇）。那么什么是DOM直出呢？

簡單說就是在瀏覽器輸入網(wǎng)址后發(fā)起請求，返回來的HTML頁面是最終呈現(xiàn)的效果，那就是DOM直出。并且每次點(diǎn)擊頁面跳轉(zhuǎn)，都會(huì)重新請求HTML資源。

說的更簡單一點(diǎn)就是你去查看一些網(wǎng)頁開發(fā)者模式，查看以下network請求返回的的資源 如果是頁面資源除了css跟script文件以外 全部都有，那么就是傳統(tǒng)的DOM直出。

而隨著對網(wǎng)頁需求的不斷增高，網(wǎng)頁也越來越傾向轉(zhuǎn)為模塊化、組件化的道路。而順勢而生的React、?Vue、?Angular?等著名單頁面應(yīng)用框架。而這些框架有一個(gè)共同的特點(diǎn)，便是“通過 JS 渲染頁面”。

這些單頁面框架之后，?HTML頁面基本上只有一個(gè)?DOM?入口，大致如下所示：

vue項(xiàng)目瀏覽器檢查源代碼

所有的頁面組件，都是通過運(yùn)行上圖底部的?app.js腳本，掛載到?<div id="root"></div>?這個(gè)節(jié)點(diǎn)下面。用一個(gè)極其簡單的 JS 展示掛載這一個(gè)步驟：

JS掛載

既然單頁面是這樣渲染的，那如果我有十幾個(gè)頁面要互相跳轉(zhuǎn)切換，咋整?。?？？這時(shí)候?前端路由?應(yīng)運(yùn)而生，它的出現(xiàn)就是為了解決單頁面網(wǎng)站，通過切換瀏覽器地址路徑，來匹配相對應(yīng)的頁面組件。

簡單來說下邏輯就是：

http://192.168.12.216:8080/#/中國---->定位到? /中國 ----->跳轉(zhuǎn)到中國這個(gè)組件

http://192.168.12.216:8080/#/美國---->定位到? /美國----->跳轉(zhuǎn)到美國?這個(gè)組件

前端路由?會(huì)根據(jù)瀏覽器地址欄 pathname?的變化，去匹配相應(yīng)的頁面組件。然后將其通過創(chuàng)建 DOM?節(jié)點(diǎn)的形式，塞入根節(jié)點(diǎn) <div id="root"></div>?。這就達(dá)到了無刷新頁面切換的效果，從側(cè)面也能說明正因?yàn)闊o刷新，所以 React?、 Vue?、 Angular?等現(xiàn)代框架在創(chuàng)建頁面組件的時(shí)候，每個(gè)組件都有自己的 生命周期?。

這里終于說到我們的Vue-Router

為了讓大家對前端路由的原理有一個(gè)更深刻的理解，我們來通過分析哈希模式和歷史模式的實(shí)現(xiàn)原理來幫助大家明白前端路由是怎么實(shí)現(xiàn)的。

哈希模式

a標(biāo)簽錨點(diǎn)大家應(yīng)該不陌生，而瀏覽器地址上#后面的變化，是可以被監(jiān)聽的，瀏覽器為我們提供了原生監(jiān)聽事件hashchange，它可以監(jiān)聽到如下的變化：

點(diǎn)擊a標(biāo)簽，改變了瀏覽器地址

瀏覽器的前進(jìn)后退行為

通過window.location方法，改變?yōu)g覽器地址

navbar.vue

app.vue

路由index.js

效果圖

歷史模式

history?模式會(huì)比?hash模式稍麻煩一些，因?yàn)?history模式依賴的是原生事件?popstate，下面是來自 MDN 的解釋：

需要注意的是調(diào)用history.pushState()/history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕（javaScript代碼中調(diào)用history.back()/history.forward()）

tips：pushState 和 replaceState 都是 HTML5 的新 API，他們的作用很強(qiáng)大，可以做到改變?yōu)g覽器地址卻不刷新頁面。這是實(shí)現(xiàn)改變地址欄卻不刷新頁面的重要方法。

因?yàn)閍標(biāo)簽點(diǎn)擊事件并不受到popState監(jiān)聽，所以我們必須想方法組織a標(biāo)簽的默認(rèn)事件，加上點(diǎn)擊事件的回調(diào)函數(shù)，在回調(diào)函數(shù)內(nèi)獲取?a?標(biāo)簽的?href屬性值，再通過?pushState?去改變?yōu)g覽器的?location.pathname?屬性值。然后手動(dòng)執(zhí)行?popstate?事件的回調(diào)函數(shù)，去匹配相應(yīng)的路由。

以上這段沒理解也沒事，因?yàn)楹竺鏁?huì)針對vue項(xiàng)目中如何絲滑的使用路由進(jìn)行詳解。