一辫继、路由原理
1腔召、SPA
SPA，即單頁面應(yīng)用(Single Page Application)搂抒。就是只有一張 web頁面的應(yīng)用艇搀。單頁應(yīng)用程序 (SPA) 是加載單個html頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的web應(yīng)用程序。瀏覽器一開始會加載必需的html求晶、css和 js 焰雕，所有的操作都在這張頁面上完成，都由js來控制
2誉帅、什么時候需要路由
對于現(xiàn)代開發(fā)的項目來說淀散，稍微復(fù)雜一點的SPA，都需要用到路由蚜锨。而 vue-roter 正是 vue 的路由標(biāo)配档插，且 vue-router 有兩種模式： hash 和 history 。
二亚再、Hash模式
1郭膛、定義
hash 模式是一種把前端路由的路徑用井號 # 拼接在真實 url 后面的模式。當(dāng)井號 # 后面的路徑發(fā)生變化時氛悬，瀏覽器并不會重新發(fā)起請求则剃，而是會觸發(fā) onhashchange 事件。
2如捅、網(wǎng)頁url組成部分
（1）了解幾個url的屬性
| 屬性 | 含義 |
|---|---|
| location.protocal | 協(xié)議 |
| location.hostname | 主機(jī)名 |
| location.host | 主機(jī) |
| location.port | 端口號 |
| location.patchname | 訪問頁面 |
| location.search | 搜索內(nèi)容 |
| location.hash | 哈希值 |
（2）演示
下面用一個網(wǎng)址來演示以上屬性：
//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb
location.protocal // 'http:'
localtion.hostname // '127.0.0.1'
location.host // '127.0.0.1:8001'
location.port //8001
location.pathname //'01-hash.html'
location.serach // '?a=100&b=20'
location.hash // '#/aaa/bbb'
3棍现、hash的特點
- hash變化會觸發(fā)網(wǎng)頁跳轉(zhuǎn)，即瀏覽器的前進(jìn)和后退镜遣。
-
hash可以改變url己肮，但是不會觸發(fā)頁面重新加載（hash的改變是記錄在window.history中），即不會刷新頁面悲关。即所有頁面的跳轉(zhuǎn)都是在客戶端進(jìn)行操作谎僻。因此，這并不算是一次http請求寓辱，所以這種模式不利于SEO優(yōu)化艘绍。hash只能修改#后面的部分，所以只能跳轉(zhuǎn)到與當(dāng)前url同文檔的url秫筏。 -
hash通過window.onhashchange的方式诱鞠，來監(jiān)聽hash的改變挎挖，借此實現(xiàn)無刷新跳轉(zhuǎn)的功能。 -
hash永遠(yuǎn)不會提交到server端（可以理解為只在前端自生自滅）般甲。
三肋乍、History模式
1、定義
history API 是 H5 提供的新特性敷存，允許開發(fā)者直接更改前端路由墓造，即更新瀏覽器 URL 地址而不重新發(fā)起請求。
2锚烦、與hash的區(qū)別
hash 與 history 在瀏覽器下刷新時的區(qū)別：
正常頁面瀏覽
https://github.com/xxx 刷新頁面
https://github.com/xxx/yyy 刷新頁面
https://github.com/xxx/yyy/zzz 刷新頁面
改造H5 history模式
https://github.com/xxx 刷新頁面
https://github.com/xxx/yyy 前端跳轉(zhuǎn)觅闽，不刷新頁面
https://github.com/xxx/yyy/zzz 前端跳轉(zhuǎn)，不刷新頁面
3涮俄、history的API
HTML5新增的API：
| API | 定義 |
|---|---|
| history.pushState(data, title [, url]) | pushState主要用于往歷史記錄堆棧頂部添加一條記錄蛉拙。各參數(shù)解析如下：①data會在onpopstate事件觸發(fā)時作為參數(shù)傳遞過去；②title為頁面標(biāo)題彻亲，當(dāng)前所有瀏覽器都會忽略此參數(shù)孕锄；③url為頁面地址，可選苞尝，缺少時表示為當(dāng)前頁地址 |
| history.replaceState(data, title [, url]) | 更改當(dāng)前的歷史記錄畸肆，參數(shù)同上； 上面的pushState是添加宙址，這個更改 |
| history.state | 用于存儲以上方法的data數(shù)據(jù)轴脐，不同瀏覽器的讀寫權(quán)限不一樣 |
| window.onpopstate | 響應(yīng)pushState或者replaceState的調(diào)用 |
4、history的特點
主要有以下特點：
- 新的
url可以是與當(dāng)前url同源的任意url抡砂，也可以是與當(dāng)前url一樣的地址大咱，但是這樣會導(dǎo)致的一個問題是，會把重復(fù)的這一次操作記錄到棧當(dāng)中注益。 - 通過
history.state碴巾，添加任意類型的數(shù)據(jù)到記錄中。 - 可以額外設(shè)置
title屬性丑搔，以便后續(xù)使用厦瓢。 - 通過
pushState、replaceState來實現(xiàn)無刷新跳轉(zhuǎn)的功能低匙。
5、存在問題
對于 history 來說碳锈，確實解決了不少 hash 存在的問題顽冶，但是也帶來了新的問題：
- 使用
history模式時，在對當(dāng)前的頁面進(jìn)行刷新時售碳，此時瀏覽器會重新發(fā)起請求强重。如果nginx沒有匹配得到當(dāng)前的url绞呈，就會出現(xiàn)404的頁面。 - 而對于
hash模式來說间景， 它雖然看著是改變了url佃声，但不會被包括在http請求中。所以倘要，它算是被用來指導(dǎo)瀏覽器的動作圾亏，并不影響服務(wù)器端。因此封拧，改變hash并沒有真正地改變url志鹃，所以頁面路徑還是之前的路徑，nginx也就不會攔截泽西。 - 因此曹铃，在使用
history模式時，需要通過服務(wù)端來允許地址可訪問捧杉，如果沒有設(shè)置陕见，就很容易導(dǎo)致出現(xiàn)404的局面。
6味抖、兩者選擇
在實際的項目中评甜，如何對這兩者進(jìn)行選擇：
-
to B的系統(tǒng)推薦用hash，相對簡單且容易使用非竿，且因為hash對url規(guī)范不敏感 -
to C的系統(tǒng)蜕着，可以考慮選擇H5 history，但是需要服務(wù)端支持 - 能先用簡單的红柱，就別用復(fù)雜的
