不管是vue 還是react都有對應(yīng)的路由機制，大致使用的方式也一樣，分為hash路由跟history路由

• hash路由就是在路由前面加一個#，跟以前的錨點一樣，根據(jù)#后面的地址欄變化來渲染不同的組件，這種路由的變化不會向服務(wù)器發(fā)送請求，所以hash的變化不會導(dǎo)致瀏覽器刷新
• history路由的變化需要客服端和服務(wù)端的支撐

hash路由

hash路由的變化會觸發(fā)hashChange函數(shù)

window.addEventListener(
    'hashchange',
    function (event) {
        const oldURL = event.oldURL; // 上一個URL
        const newURL = event.newURL; // 當(dāng)前的URL
    },
    false
)

可以根據(jù)oldUrl和newURL的變化來把不同的組件掛載在root節(jié)點上(正常情況下 vue和react都有一個id為root節(jié)點)
只有hash路由改變了才會觸發(fā)hashchange，初始化的時候不會觸發(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()：后退到上一個路由；
• forward(): 前進一路路由，如果前進路由存在
• go(numeber):進入到任意一個路由，正數(shù)為前進，負(fù)數(shù)為后退；
• pushState(obj, title, url)：指定到那個路由，頁面不刷新；
• replaceState(obj, title, url)：用 url 替換當(dāng)前的路由，不刷新頁面；
  以上五種方法都可以修改URL而不發(fā)送Http請求

pushState、replaceState和location.href和location.replace的區(qū)別

1. location.href和location.replace會觸發(fā)瀏覽器發(fā)送http請求,pushState、replaceState只是改變url不會發(fā)送請求
2. pushState、replaceState可以做一些切換路由的動畫

history提供了一個popstate方法來監(jiān)聽路由的變化, 可以通過今天popstate監(jiān)聽變化來改變顯示對應(yīng)的組件。但是replaceState和pushState方法不會觸發(fā)popstate，需要單獨監(jiān)聽