vue路由模式有：1、hash模式，使用URL的hash值來(lái)作為路由，支持所有瀏覽器；其url路徑會(huì)出現(xiàn)“#”字符。2、history模式，依賴于HTML5 API（舊瀏覽器不支持）和HTTP服務(wù)端配置，沒(méi)有后臺(tái)配置的話，頁(yè)面刷新時(shí)會(huì)出現(xiàn)404。3、abstract模式，適用于所有JavaScript環(huán)境，如果沒(méi)有瀏覽器API，路由器將自動(dòng)被強(qiáng)制進(jìn)入此模式。

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

路由模式解析

這里要講vue-router的路由模式，首先要了解的一點(diǎn)就是路由是由多個(gè)URL組成的，使用不同的URL可以相應(yīng)的導(dǎo)航到不同的位置。如果有進(jìn)行過(guò)服務(wù)器開(kāi)發(fā)或者對(duì)http協(xié)議有所了解就會(huì)知道，瀏覽器中對(duì)頁(yè)面的訪問(wèn)是無(wú)狀態(tài)的，所以我們?cè)谇袚Q不同的頁(yè)面時(shí)都會(huì)重新進(jìn)行請(qǐng)求。而實(shí)際使用vue和vue-router開(kāi)發(fā)就會(huì)明白，在切換頁(yè)面時(shí)是沒(méi)有重新進(jìn)行請(qǐng)求也沒(méi)有重新刷新頁(yè)面，使用起來(lái)就好像頁(yè)面是有狀態(tài)的，這是什么原因呢。這其實(shí)是借助了瀏覽器的History API來(lái)實(shí)現(xiàn)的，這樣可以使得頁(yè)面跳轉(zhuǎn)而不刷新，頁(yè)面的狀態(tài)就被維持在瀏覽器中了。

一、hash模式

使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載，其顯示的網(wǎng)路路徑中會(huì)有 “#” 號(hào)，有一點(diǎn)點(diǎn)丑。這是最安全的模式，因?yàn)樗嫒菟械臑g覽器和服務(wù)器。

1-特點(diǎn)：hash模式的url地址上有'#'

 <a href='#/aaa'>1(#/aaa)</a>

其中#/aaa就是我們的hash值,并且hash值并不會(huì)傳給服務(wù)器

2-實(shí)現(xiàn)的原理：

原生的hashChange事件，主要是通過(guò)事件監(jiān)聽(tīng)hash值得變化 window.onHashChange=function(){}

3-刷新頁(yè)面：

不會(huì)不發(fā)生請(qǐng)求，頁(yè)面不會(huì)有任何問(wèn)題，不需要后端配合

而且hash模式的兼容性比較好.不過(guò)他因?yàn)閹в?#39;#'所以他的美觀行沒(méi)有history 模式好。

二、history模式

美化后的hash模式，會(huì)去掉路徑中的 “#”。依賴于Html5 的history，pushState API，所以要擔(dān)心IE9以及一下的版本，感覺(jué)不用擔(dān)心。并且還包括back、forward、go三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。就是瀏覽器左上角的前進(jìn)、后退等按鈕進(jìn)行的操作。

history.go(-2);//后退兩次 history.go(2);//前進(jìn)兩次 history.back(); //后退 hsitory.forward(); //前進(jìn)

但是history也是有缺點(diǎn)的，不怕前進(jìn)后退跳轉(zhuǎn)，就怕刷新（如果后端沒(méi)有準(zhǔn)備的話），因?yàn)樗⑿率菍?shí)實(shí)在在地去請(qǐng)求服務(wù)器了?！緦W(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

總結(jié)一下

1：hash模式（vue-router默認(rèn)模式URL后面帶#）使用URL的hash值來(lái)作為路由，支持所有瀏覽器；缺點(diǎn)：只能改變#后面的來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)。
2：history模式（通過(guò)mode: 'history’來(lái)改變?yōu)閔istory模式）HTML5 （BOM）History API 和服務(wù)器配置 缺點(diǎn)：怕刷新如果后端沒(méi)有處理這個(gè)情況的時(shí)候前端刷新就是實(shí)實(shí)在在的請(qǐng)求服務(wù)器這樣消耗的時(shí)間很多還很慢。

三、abstract模式

abstract 是vue路由中的第三種模式，本身是用來(lái)在不支持瀏覽器API的環(huán)境中，充當(dāng)fallback，而不論是hash還是history模式都會(huì)對(duì)瀏覽器上的url產(chǎn)生作用，他一般要實(shí)現(xiàn)的功能就是在已存在的路由頁(yè)面中內(nèi)嵌其他的路由頁(yè)面，而保持在瀏覽器當(dāng)中依舊顯示當(dāng)前頁(yè)面的路由path，這就是abstract這種與瀏覽器分離的路由模式。

適用于所有JavaScript環(huán)境，例如服務(wù)器端使用Node.js。如果沒(méi)有瀏覽器API，路由器將自動(dòng)被強(qiáng)制進(jìn)入此模式。

然后在

const router = new VueRouter({routes, mode:'hash|history|abstract',})

這里進(jìn)行切換。

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）