vue，react两种路由的简单原理

不管是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的区别

1. location.href和location.replace会触发浏览器发送http请求,pushState、replaceState只是改变url不会发送请求
2. pushState、replaceState可以做一些切换路由的动画

history提供了一个popstate方法来监听路由的变化, 可以通过今天popstate监听变化来改变显示对应的组件。但是replaceState和pushState方法不会触发popstate，需要单独监听