不管是vue 還是react都有對應(yīng)的路由機(jī)制，大致使用的方式也一樣硝桩，分為hash路由跟history路由
- hash路由就是在路由前面加一個(gè)
#沿猜，跟以前的錨點(diǎn)一樣，根據(jù)#后面的地址欄變化來渲染不同的組件碗脊，這種路由的變化不會向服務(wù)器發(fā)送請求啼肩，所以hash的變化不會導(dǎo)致瀏覽器刷新 - history路由的變化需要客服端和服務(wù)端的支撐
hash路由
hash路由的變化會觸發(fā)hashChange函數(shù)
window.addEventListener(
'hashchange',
function (event) {
const oldURL = event.oldURL; // 上一個(gè)URL
const newURL = event.newURL; // 當(dāng)前的URL
},
false
)
可以根據(jù)oldUrl和newURL的變化來把不同的組件掛載在root節(jié)點(diǎn)上(正常情況下 vue和react都有一個(gè)id為root節(jié)點(diǎn))
只有hash路由改變了才會觸發(fā)hashchange，初始化的時(shí)候不會觸發(fā)該函數(shù)衙伶，但是會觸發(fā)load函數(shù)祈坠，我們根據(jù)load函數(shù)拿到當(dāng)前路由，
window.addEventListener(
'load',
function (event) {
const URL =window.location.hash; // 當(dāng)前url
},
false
)
load的event中沒有oldURL和newURL矢劲，只能通過window.location.hash獲取
history路由
history有常用的5種方法
- back()：后退到上一個(gè)路由颁虐；
- forward(): 前進(jìn)一路路由，如果前進(jìn)路由存在
- go(numeber):進(jìn)入到任意一個(gè)路由卧须，正數(shù)為前進(jìn)另绩，負(fù)數(shù)為后退儒陨；
- pushState(obj, title, url)：指定到那個(gè)路由，頁面不刷新笋籽；
- replaceState(obj, title, url)：用 url 替換當(dāng)前的路由蹦漠，不刷新頁面；
以上五種方法都可以修改URL而不發(fā)送Http請求
pushState车海、replaceState和location.href和location.replace的區(qū)別
- location.href和location.replace會觸發(fā)瀏覽器發(fā)送http請求,pushState笛园、replaceState只是改變url不會發(fā)送請求
- pushState、replaceState可以做一些切換路由的動畫
history提供了一個(gè)popstate方法來監(jiān)聽路由的變化, 可以通過今天popstate監(jiān)聽變化來改變顯示對應(yīng)的組件侍芝。但是replaceState和pushState方法不會觸發(fā)popstate研铆，需要單獨(dú)監(jiān)聽
