前端路由

路由

我理解的路由，有一个url是xxx.com，访问

xxx.com
xxx.com/a
xxx.com/b

会对应有不同的界面。也就是根据不同的路径，我们得到了不同的结果。后端的web服务器如何实现这样的跳转，收到浏览器发出的响应后，对于不同的路径，web服务器返回不同的html等信息给浏览器。这就是路由的作用。

前端路由

前端路由，就是访问不同路径，由浏览器中的js根据/后不同的路径来控制页面的跳转，得到了不同的页面。这个过程由前端控制，不需后端web服务器处理。常见的实现比如Vue-router。开发单页面应用时，就会用到路由功能。

前端路由实现的原理

访问xxx.com/a， xxx.com/b时，正常状态下，页面会进行刷新，状态会发生改变。实现前端控制路由，有下面这些方法。

通过锚点

把xxx.com/a， xxx.com/b改为xxx.com/#a， xxx.com/#b，浏览器处理时，URL后的锚点信息是不会传给服务器的，因此后端不会有处理。
通过onhashchange API能监听URL的锚点变化，锚点变化时，通过js控制跳转到指定的页面。

通过window.history

history.pushState(state, title, url)
将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。也就是实现了访问xxx.com/a， xxx.com/b时，请求传给后端web服务器，但是并不刷新当前页面。后端的web服务器收到请求后，都返回了同样的结果，浏览器得到同一个html。

代码实现

Vue-router的例子

• 最基本的例子，https://jsfiddle.net/yyx990803/xgrjzsup/，这里的原理是通过hash锚点来实现。
• vue-router也支持使用history方式实现，文档里可以看（这种方式要对后端web服务器进行配置，确保不同路径请求返回相同页面，否则会404）

原生JS实现

直接控制display实现

http://js.jirengu.com/gohitupawu/1/

通过锚点

<style>
    .content>div{
        display: none;
    }
    .content>div.active{
        display: block;
    }
    ol>li.active{
        color: red;
    }
</style>

  <tab>
    <ol class="nav">
      <li><a href="#1">goToA</a></li>
      <li><a href="#2">goToB</a></li>
    </ol>
    
    <ol class="content">
      <div>this is A</div>
      <div>this is B</div>
    </ol>
  </tab>

<script>
    selectTab()
    window.onhashchange = function(){
        selectTab()
    }
    function selectTab(){
        let n = location.hash.substring(1)
        let index = n - 1
        $('ol.content>div').eq(index)
              .addClass('active')
              .siblings()
              .removeClass('active')    
    }
</script>

上述方式即是通过锚点，监听hash变化实现的前端路由。

history方式

代码略