vue-router中hash模式、history模式原理

利用a连接的跳转及监听window的hashchange事件拿到跳转的hash，借助于vue的component组件，实现组件跳转。

<div id="app">
      <!-- 入口 -->
      <a href="#/zhuye">主页</a>
      <a href="#/caijing">财经</a>
      <a href="#/tiyu">体育</a>
      <a href="#/shenghuo">生活</a>

      <!-- ! Vue 内置组件 组件占位符 寻找对应的组件名 出口 -->
      <component :is="comName"></component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const zhuye = {
        template: `<h1>主页信息</h1>`
      }
      const caijing = {
        template: `<h1>财经信息</h1>`
      }
      const tiyu = {
        template: `<h1>体育信息</h1>`
      }
      const shenghuo = {
        template: `<h1>生活信息</h1>`
      }
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        components: {
          zhuye,
          caijing,
          tiyu,
          shenghuo
        }
      })

      //  锚点 hashchange 事件
      window.onhashchange = function () {
        //   将锚点信息给vue实例绑定的数据
        vm.comName = location.hash.slice(2)
      }
</script>

利用history对象，重新封装pushState与replaceState方法，实现对地址变化的监听。对于history的其他方法可以通过原生popstate监听。

/**
 * 重写history的pushState和replaceState
 * @param action pushState|replaceState
 * @return {function(): *}
 */
function wrapState(action) {
  // 获取原始定义
  let raw = history[action]
  return function () {
    // 经过包装的pushState或replaceState
    let wrapper = raw.apply(this, arguments)

    // 定义名为action的事件
    let e = new Event(action)

    // 将调用pushState或replaceState时的参数作为stateInfo属性放到事件参数event上
    e.stateInfo = { ...arguments }
    // 调用pushState或replaceState时触发该事件
    window.dispatchEvent(e)
    return wrapper
  }
}

//修改原始定义
history.pushState = wrapState('pushState')
history.replaceState = wrapState('replaceState')

// 监听自定义的事件
window.addEventListener('pushState', function (e) {
  console.log('pushState', e.stateInfo)
})
window.addEventListener('replaceState', function (e) {
  console.log('replaceState', e.stateInfo)
})