什么是路由：

     路由是Vuejs中重要的部分 ，分为前端路由以及后端路由

     前端路由实现是基于hash值变化实现的 也就是靠一个监听hash值的事件

 核心代码：

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

  前端路由实现一下tab栏切换

html:

   <div id="app">
      <a href="#/home">主页</a>
      <a href="#/sci">科技</a>
      <a href="#/fina">财经</a>
      <a href="#/recr">娱乐</a>
      <!-- 组件占位符 -->
      <component :is='comName'></component>
    </div>

 javascript:

 // 子组件
  // 定义需要被切换的 4 个组件
  // 主页组件
  let homepage = {
    template: `
            <div>
                <h1>主页信息</h1>
            </div>
            `,
  };

  // 科技组件
  let science = {
    template: `
            <div>
                <h1>科技信息</h1>
            </div>
            `,
  };

  // 财经组件
  let finance = {
    template: `
            <div>
                <h1>财经信息</h1>
            </div>
            `,
  };

  // 娱乐组件
  let recreation = {
    template: `
            <div>
                <h1>娱乐信息</h1>
            </div>
            `,
  };

  // 根组件
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        comName: "homepage",
      };
    },
    methods: {},

    components: {
      homepage,
      science,
      finance,
      recreation,
    },
  });

  // 通过hash值，切换路由，访问不同的组件
  // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
  window.onhashchange = function () {
    console.log(location.hash);
    // 多路分支
    switch (location.hash.slice(1)) {
      case "/home":
        vm.comName='homepage'
        break;
      case "/sci":
      vm.comName='science'
        break;
      case "/fina":
      vm.comName='finance'
        break;
      case "/recr":
      vm.comName='recreation'
        break;
    }
  };
</script>