关于前端路由

什么是路由

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源（if...else...），给我一个路径，我给你返回一个响应，请求不同的页面是路由的其中一种功能。

前端路由

我们通过一个状态切换的例子来理解前端路由，代码如下：

  // HTML
  <x-tab>
    <ol class="nav">
      <li>tab 1</li>
      <li>tab 2</li>
    </ol>
    <ol class="content">
      <li>content 1</li>
      <li>content 2</li>
    </ol>
  </x-tab>

  // CSS
  x-tab{ display: block; }
  x-tab > .nav > li.active{ background: red; }
  x-tab > .content > li{ display: none; }
  x-tab > .content > li.active{ display: block; }

  // js（引入jquery）
  $('x-tab').on('click', '.nav > li', (e)=>{
    let $li = $(e.currentTarget);
    $li.addClass('active').siblings().removeClass('active');
    let index = $li.index();
    $li.closest('x-tab').find('.content > li').eq(index).addClass('active')
      .siblings().removeClass('active')
  })

这样实现了点击tab-1，出现对应的 content-1 的内容，点击tab-2，出现对应的 content-2 的内容的功能。

现在，我们先设置 tab-1的状态为 active，content-1 也为 active。刷新页面，我们点击 tab-2，tab-2 就被激活了。这个时候，我们刷新页面或者是将此页面分享给别人，打开页面以后又回到了 tab-1，这样就会出现同样的 url 看到的界面却是不一样的。那么如何才能使你的界面状态是可分享？

1. 使用哈希来保存当前页面状态信息
通过 index 来记录用户点击的是第几个 tab， 使用 hash 来记录这个状态。

  // HTML和CSS不变
  // js
  let index = location.hash || '#0' //2
  index = index.substring(1)  //3
  $('x-tab > .nav > li').eq(index).addClass('active').siblings()
    .removeClass('active');
  $('x-tab > .content > li').eq(index).addClass('active').siblings()
    .removeClass('active');    

  $('x-tab').on('click', '.nav > li', (e)=>{
    let $li = $(e.currentTarget);
    $li.addClass('active').siblings().removeClass('active');
    let index = $li.index(); //点的是第几个tab
    location.hash = index // 1
    $li.closest('x-tab').find('.content > li').eq(index).addClass('active')
      .siblings().removeClass('active')
  })

通过三个步骤：

1. 设置 hash
2. 读取 hash
3. 分享 hash

这样呢我们的界面状态就可以通过锚点来记录了，将链接复制到另一个窗口上打开依然是原来的状态，此时就简单的实现了，刷新页面当前状态不改变，同时当前状态可分享给别人。

2. 使用 a 标签 和监听哈希变更事件
上面的例子中，其实我们点击事件保存的就是形如后缀为 #0 和 #1 这样的 url。有没有另外一种可能，既然我们是通过锚点来切换 tab 的话，那能不能用 a 标签来做呢？

这样我们点击 tab 的时候更改变化的是 url，就不去监听 click 事件了，我们监听什么事件呢？是哈希变更事件（hashchange），就是如果 a 标签点击之后哈希是1，就把第一个添加上一个红色背景。代码如下：

  // HTML
  <x-tab>
    <ol class="nav">
      <li><a href="#0"> tab 1 </a></li>
      <li><a href="#1"> tab 2 </a></li>
    </ol>
    <ol class="content">
      <li>content 1</li>
      <li>content 2</li>
    </ol>
  </x-tab>

  // js
  selectTab()   
  window.onhashchange = (e)=>{
    selectTab()
  }

  function selectTab(){
    let index = location.hash || '#0'
    index = index.substring(1)
    $('x-tab > .nav > li').eq(index).addClass('active').siblings()
      .removeClass('active');
    $('x-tab > .content > li').eq(index).addClass('active').siblings()
      .removeClass('active');  
  }

这种方法代码也精简了很多，其实就 3 行代码，首先选择下 tab，当哈希变化的时候，再选择一下 tab 。

但是这个哈希还有很大的问题，就是如果还有一个回到顶部的链接。原本我们已经选中了 tab-2 ，但是点击了回到顶部以后原来的状态被覆盖了，因此在刷新页面或其他窗口打开的时候就没有了原来的状态。

3. 使用路径来代替哈希
在上面的例子中，如果在 a 标签中使用锚点表示某个状态，容易被其他的锚点所覆盖。那么我们直接使用路径来代替哈希，当点击 tab1 就跳转到 <a href="./tab1">，当点击 tab2 就跳转到 <a href="./tab2">。

但是这个请求不可能成功，因为后台根本就没有响应 './tab1'和'./tab2'这个路径。当点击 tab1 的时候它会跳页面，就会去请求 tab1 这个页面，返回的是 404。

实际上我们的目的不是跳转页面只是想改变 url，没关系，我么可以阻止 a 标签的默认事件，不要它跳转（e.preventDefault()）。

  // HTML
  <x-tab>
    <ol class="nav">
      <li><a href="./tab1"> tab 1 </a></li>
      <li><a href="./tab2"> tab 2 </a></li>
    </ol>
    <ol class="content">
      <li>content 1</li>
      <li>content 2</li>
    </ol>
  </x-tab>

  // js 
  selectTab()   
  $('x-tab').on('click', '.nav > li > a', (e)=>{
    e.preventDefault();
    let a = e.currentTarget;
    let path = a.getAttribute('href');
    window.history.pushState({], xxx, path);
    selectTab();
  })

  function selectTab(){
    let index = location.pathname.substring(1) || 'tab1';
    index = index.substring(3);
    if(index === 1){
      $('x-tab > .nav > li').eq(0).addClass('active').siblings()
        .removeClass('active');
      $('x-tab > .content > li').eq(0).addClass('active').siblings()
        .removeClass('active');  
    }else if(index === 2){
      $('x-tab > .nav > li').eq(1).addClass('active').siblings()
        .removeClass('active');
      $('x-tab > .content > li').eq(1).addClass('active').siblings()
        .removeClass('active'); 
    }
  }

这样我们点击 tab1 或者 tab2 的时候，就只是改了 url，没有跳转页面这就叫做巧用 History API无刷新更改地址栏。

现在的问题是此时的页面状态是不可分享的，返回 404，后台没有这个路径的路由信息。因为所有的 url 都是先给服务器过一遍，然后再给 js 的。

这个时候我们可以自己写一个后端路由来模拟实现刷新页面后不跳转页面，当路径为 / 或者/tab1 或者 /tab2 的时候都是返回同一个页面。

  if(path === '/' || path === '/tab1' || path === '/tab2'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    let string = fs.readFileSync('./index.html','utf8')
    response.write(string)
    response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

这样就不会去通知服务器，js 做的假的页面跳转，同时把页面更新到对应的状态。

现在我们应该可以知道了

1. 路由就是给我一个路径，我给你返回一个响应

2. 前端路由就是前端页面做这个事情，前端做路由

3. 后端路由呢就是后端做路由

以上的前端路由，也就是 Vue-Router 中 <router-link></router-link>的实现原理。