???????本篇文章主要介紹前端路由相關(guān)的文章玻淑。在稍微復(fù)雜一點(diǎn)的SPA族壳，都需要路由孔庭，vue-router也是vue全家桶的標(biāo)配之一梳侨。vue-router中有hash和H5 History兩種路由模式蛉威，下面，我們逐個(gè)進(jìn)行講解走哺。
一蚯嫌、網(wǎng)頁(yè)中url組成部分
二、hash模式
???????1丙躏、hash變化會(huì)觸發(fā)網(wǎng)頁(yè)跳轉(zhuǎn)择示，即瀏覽器的前進(jìn)、后退晒旅。
???????2栅盲、hash變化不會(huì)刷新頁(yè)面，SPA必需的特點(diǎn)
???????3敢朱、hash永遠(yuǎn)不會(huì)提交到server端（自生自滅）
???????在瀏覽器端剪菱，我們可以通過(guò)調(diào)用window.onhashchange方法來(lái)監(jiān)聽(tīng)頁(yè)面hash的變化摩瞎。下面的操作，都不會(huì)導(dǎo)致頁(yè)面hash值發(fā)生改變孝常，從而觸發(fā)window.onhashchange方法的執(zhí)行旗们。
a. js修改url
b. 手動(dòng)修改 url 的hash
c. 瀏覽器前進(jìn)、后退
具體請(qǐng)看下面代碼
1构灸、監(jiān)聽(tīng)hash改變
// hash 變化 包括
// a. js修改url
// b. 手動(dòng)修改 url 的hash
// c. 瀏覽器前進(jìn)上渴、后退
window.onhashchange = (event) => {
console.log('old url', event.oldURL)
console.log('new url', event.newURL)
console.log('hash',location.hash)
}
2、頁(yè)面初次加載喜颁，獲取hash
// 頁(yè)面初次加載稠氮，獲取hash
document.addEventListener('DOMContentLoaded', () => {
console.log('hash:', location.hash)
})
3、js修改hash
document.getElementById('btn1').addEventListener('click', function(){
location.href="#/user"
})
4半开、手動(dòng)修改hash
???????此處不做演示隔披。
三、H5 history模式
???????1寂拆、用url規(guī)范的路由奢米，但是跳轉(zhuǎn)時(shí)不刷新頁(yè)面。
???????2纠永、history.pushState
???????3鬓长、history.onpopstate
???????正常頁(yè)面瀏覽是需要刷新頁(yè)面的，改造成H5 history模式后尝江，在首次加載后涉波，就不需要刷新頁(yè)面了。如下所示：
???????1、
history.pushState和history.repalceState的使用???????pushState說(shuō)明
???????pushState方法接受三個(gè)參數(shù)惭聂，依次為：state：一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象城侧，popstate事件觸發(fā)時(shí)，該對(duì)象會(huì)傳入回調(diào)函數(shù)彼妻。如果不需要這個(gè)對(duì)象，此處可以填null豆茫。title：新頁(yè)面的標(biāo)題侨歉，但是所有瀏覽器目前都忽略這個(gè)值，因此這里可以填null揩魂。url：新的網(wǎng)址幽邓，必須與當(dāng)前頁(yè)面處在同一個(gè)域。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址火脉。
???????最常用的方法：window.history.pushState(null,null,'download?id=1');完整使用：var oState= {title: '下載' };window.history.pushState(oState, '下載', 'download?id=1')
???????特點(diǎn)：
???????pushState()可以創(chuàng)建歷史
???????可以配合popstate事件
???????可以使用history.go(-1)返回到上一個(gè)頁(yè)面牵舵。
window.addEventListener('popstate', function(evt){
var state = evt.state;
document.title= state.title;
}, false);
replaceState說(shuō)明
???????window.history.replaceState(null,null,'download?id=1');完整使用：var oState= {title: '下載' };window.history.replaceState(oState, '下載', 'download?id=1');
???????特點(diǎn)：
???????replaceState不會(huì)加入到歷史記錄里面柒啤，
???????用history.go(-1)會(huì)跳過(guò)當(dāng)前頁(yè)面相當(dāng)于是history.go(-2)。
具體請(qǐng)看下面代碼：
1畸颅、頁(yè)面初次加載担巩，獲取patch
document.addEventListener('DOMContentLoaded', () => {
console.log('load', location.pathname)
})
2、打開(kāi)一個(gè)新路由
// 打開(kāi)一個(gè)新路由
// 【注意】用pushState方法没炒，瀏覽器不會(huì)刷新頁(yè)面
document.getElementById('btn1').addEventListener('click', function(){
const state = {name: 'page1'}
console.log('切換路由到', 'page1')
history.pushState(state, 'page1', 'page1')
})
3涛癌、監(jiān)聽(tīng)瀏覽器前進(jìn)、后退
// 監(jiān)聽(tīng)瀏覽器前進(jìn)送火、后退
window.onpopstate = (event) => {
console.log('onpopstate', event.state,location.pathname)
}
???????注意：H5 history模式一定要運(yùn)行在服務(wù)器模式下拳话。需要用http-server這樣的工具啟動(dòng)服務(wù)器。
