1、什么是單頁面應(yīng)用

對(duì)于網(wǎng)站建設(shè)公司來說，根據(jù)不同的 url 地址，顯示不同的內(nèi)容，但是顯示在同一個(gè)頁面中，也就是只有一個(gè)頁面，所以稱為單頁面應(yīng)用，英文 SPA(SinglePage Application)。像移動(dòng)端很多 App 都是單頁面應(yīng)用。

改變 url 地址，顯示不同的頁面，實(shí)現(xiàn)的手段就是前端路由。

2、什么是路由及前端路由

簡(jiǎn)單舉例說明，假如我們有一臺(tái)提供 Web 服務(wù)的服務(wù)器的網(wǎng)絡(luò)地址是：122.22.33.11，而該 Web 服務(wù)又提供了三個(gè)可供用戶訪問的頁面，其頁面 URI 分別是：

http:// 122.22.33.11/

http:// 122.22.33.11/about

http:// 122.22.33.11/news

那么其路徑就分別是 /，/about，/news。

當(dāng)用戶使用 http:// 122.22.33.11/about 來訪問該頁面時(shí)， Web 服務(wù)會(huì)接收到這個(gè)請(qǐng)求，然后會(huì)解析 URL 中的路徑 /about， 在 Web 服務(wù)的程序中，該路徑對(duì)應(yīng)著相應(yīng)的處理邏輯，程序會(huì)把請(qǐng)求交給路徑所對(duì)應(yīng)的處理邏輯，這樣就完成了一次【路由分發(fā)】，這個(gè)分發(fā)就是通過【路由】來完成的。

簡(jiǎn)單的說，路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面。以前路由都是后臺(tái)做的，通過用戶請(qǐng)求的 url 導(dǎo)航到具體的 html頁面，前端路由就是通過配置 js 文件，改變 url 地址，顯示不同的頁面，把這個(gè)工作拿到前端來做。即 URL 變化引起 UI 更新，而且頁面不能刷新。

3、實(shí)現(xiàn)前端路由基本原理

要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心問題：

如何改變 URL 卻不引起頁面刷新？

如何檢測(cè) URL 變化了？

目前的前端路由的實(shí)現(xiàn)方式主要有下面兩種

（1）hash 路由：location.hash+hashchange 事件

（2）history 路由：history.pushState()+popState 事件

其實(shí)不管是哪種模式都是基于瀏覽器自身的特性。

（1）location.hash+hashchange 事件：實(shí)現(xiàn)基本原理

這種方法的好處在于支持 IE 瀏覽器。對(duì)早期的一些瀏覽器的支持比較好。hash 是什么：其實(shí)在之前的前端開發(fā)中，是有所接觸的。

例如，在某些情況下，我們需要定位頁面上的某些位置，就像下面的例子中展現(xiàn)的那樣，我想要通過點(diǎn)擊不同的鏈接按鈕就跳轉(zhuǎn)到指定的位置，這里我們使用的錨點(diǎn)定位其實(shí)就是 hash。

<div id=“content”>

<div class=“btn-container”>

<a class=“btn” href=“#image1”>圖片 1

<a class=“btn” href=“#image2”>圖片 2

</div>

<img src=“./xxx/xxx.jpg” id=“image1”>

<img src=“./xxx/xxx.jpg” id=“image2”>

</div>

location.hash 始終指向頁面 url 中#之后的內(nèi)容，比如：當(dāng)當(dāng)

前頁面的 url =‘www.taobao.com’,可以在瀏覽器的控制臺(tái)輸入location.hash 為 空 （ 因 為 沒 有 # ）， 當(dāng) 頁 面 指 向 url =‘www.taobao.com/#/about’的時(shí)候，location.hash = ‘#/about’。通過讀取 location.hash 可以知道當(dāng)前頁面所處的位置。通過hashchange 事件可以監(jiān)聽 location.hash 的變化，從而進(jìn)行相應(yīng)的處理即可。

那么如何觸發(fā) hash 的改變呢？這里主要由兩種方法：

第一、設(shè)置 a 標(biāo)簽，href = ‘#/about’，當(dāng)點(diǎn)擊標(biāo)簽的時(shí)候，可以在當(dāng)前 url 的后面增加上’#/about’，同時(shí)觸發(fā) hashchange,在回調(diào)函數(shù)中進(jìn)行處理。

第二、直接在 js 中設(shè)置 location.hash = '#/about’即可，此時(shí)

url 會(huì)改變，也會(huì)觸發(fā) hashchange 事件。

說明：改變 URL 中的 hash 部分（#后面內(nèi)容）不會(huì)引起頁面刷新 。

（2）history.pushState()+popState 事件：實(shí)現(xiàn)基本原理

history 路 由 ： 在 之 前 的 html 版 本 中 ， 我 們 可 以 通 過history.back(), history.forward()和 history.go() 方法來完成在用戶歷史記錄中向后和向前的跳轉(zhuǎn)。而該實(shí)現(xiàn)方式是通過 pushState()修改 url 的地址，popstate 事件監(jiān)聽地址的改變。pushState()方法和 replaceState 事件是 html5 新增的，它們的配合使用不會(huì)引起頁 面 刷 新 。

具 體 實(shí) 現(xiàn) 原 理 參 考 ：https://www.renfei.org/blog/html5-introduction-3-history-api. html

在 Vue 中，Vue Router 是官方提供的路由管理器。它和

Vue.js 深度集成，因此，不管是采用 hash 的方式還是使用 history實(shí)現(xiàn)我們的前端路由都有很好的支持，所以下面我們采用 VueRouter 這一組件來實(shí)現(xiàn)我們的前端路由。