不管是vue 还是react都有对应的路由机制，大致使用的方式也一样，分为hash路由跟history路由
- hash路由就是在路由前面加一个
#，跟以前的锚点一样，根据#后面的地址栏变化来渲染不同的组件，这种路由的变化不会向服务器发送请求，所以hash的变化不会导致浏览器刷新 - history路由的变化需要客服端和服务端的支撑
hash路由
hash路由的变化会触发hashChange函数
window.addEventListener(
'hashchange',
function (event) {
const oldURL = event.oldURL; // 上一个URL
const newURL = event.newURL; // 当前的URL
},
false
)
可以根据oldUrl和newURL的变化来把不同的组件挂载在root节点上(正常情况下 vue和react都有一个id为root节点)
只有hash路由改变了才会触发hashchange，初始化的时候不会触发该函数，但是会触发load函数，我们根据load函数拿到当前路由，
window.addEventListener(
'load',
function (event) {
const URL =window.location.hash; // 当前url
},
false
)
load的event中没有oldURL和newURL，只能通过window.location.hash获取
history路由
history有常用的5种方法
- back()：后退到上一个路由；
- forward(): 前进一路路由，如果前进路由存在
- go(numeber):进入到任意一个路由，正数为前进，负数为后退；
- pushState(obj, title, url)：指定到那个路由，页面不刷新；
- replaceState(obj, title, url)：用 url 替换当前的路由，不刷新页面；
以上五种方法都可以修改URL而不发送Http请求
pushState、replaceState和location.href和location.replace的区别
- location.href和location.replace会触发浏览器发送http请求,pushState、replaceState只是改变url不会发送请求
- pushState、replaceState可以做一些切换路由的动画
history提供了一个popstate方法来监听路由的变化, 可以通过今天popstate监听变化来改变显示对应的组件。但是replaceState和pushState方法不会触发popstate，需要单独监听
