vue-router中hash模式原理

利用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>

      
      <component :is="comName">component>
div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const zhuye = {
     
        template: `
主页信息
`
      }
      const caijing = {
     
        template: `
财经信息
`
      }
      const tiyu = {
     
        template: `
体育信息
`
      }
      const shenghuo = {
     
        template: `
生活信息
`
      }
      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>