前端路由的实现方式

抽点时间学点知识，说不一定面试就问到了呢，机会是留给有准备的人哒

前端路由主要应用在SPA（但页面开发），在不刷新路径的情况下，根据不同的URL来显示不同的组件或者内容

hash值+onhashchange事件

  <button>index</button>
  <button>list</button>
  <h1>Hash模式的前端路由</h1>
  <div id="router"></div>

  <script>
    window.addEventListener('load', function () {
      var btn = document.getElementsByTagName('button')
      var router = document.getElementById('router')

      //配置路由路径
      var routers = [
        { path: '/index', component: '<p>我是首页</p>' },
        { path: '/list', component: '<p>我是列表页</p>' }
      ];
      //初始化路由
      window.location.hash = '/'
      //点击设置路由跳转到首页
      btn[0].onclick = function () {
        window.location.hash = '/index'
      }
      //点击设置路由跳转到列表业
      btn[1].onclick = function () {
        window.location.hash = '/list'
      }

      window.addEventListener('hashchange', function () {
        var hash = window.location.hash
        for (var i = 0; i < routers.length; i++) {
          if (('#' + routers[i].path) === hash) {
              router.innerHTML = routers[i].component
          }
        }
      })
    })
  </script>