什么是路由

路由用简要来说就是根据路径选择不同的页面展示给用户，这就是路由。
下面以点击tab导航的不同元素，从而展现不同的内容为例，来演示前后端路由的实现过程以及区别。

后端路由（后端实现路由）

• 前端代码

//html
<x-tab>
  <ul class="tabs">
    <li><a href="./tab1">tab1</a></li>
    <li><a href="./tab2">tab2</a></li>
  </ul>
</x-tab>

• 服务器端代码

if (pathName === '/tab1'){
    let string = fs.readFileSync('./tab1.html', 'utf8')
    response.setHeader('Content-Type', 'text/html; charset=utf8')
    response.write(string)
    response.end()
} else if (pathName === '/tab2'){
    let string = fs.readFileSync('./tab2.html', 'utf8')
    response.setHeader('Content-Type', 'text/html; charset=utf8')
    response.write(string)
    response.end()
}

总结

1. 服务器端的if else，根据请求的不同路径，向用户展示不同的内容，就是后端实现的路由
2. 服务器端实现路由是多页应用，点击请求不同路径，会跳转到不同页面

前端路由（前端实现路由）

方案一：利用hash（锚点）

• 前端代码

//html
<x-tab>
  <ul class="tabs">
    <li><a href="#0">tab1</a></li>
    <li><a href="#1">tab2</a></li>
  </ul>
  <ul class="contents">
    <li>content1</li>
    <li>content2</li>
  </ul>
</x-tab>
<a href="#top">回到顶部</a>

//css
x-tab{display: block;}
.tabs > li.active {background: red;}
.contents > li {display: none;}
.contents > li.active {display: block;}

//js
selectTab()
window.onhashchange = () => {
  selectTab()
}
function selectTab(){
  let index = location.hash || '#0'
  index = index.substring(1)
  
  if (index === '0') {
    $('x-tab > .tabs > li').eq(0).addClass('active').siblings().removeClass('active')
    $('x-tab > .contents > li').eq(0).addClass('active').siblings().removeClass('active')
  } else if (index === '1') {
    $('x-tab > .tabs > li').eq(1).addClass('active').siblings().removeClass('active')
    $('x-tab > .contents > li').eq(1).addClass('active').siblings().removeClass('active')
  }

  //上面if else可以合起来写成下面的，为了直观的显示路由，故意拆开来写的
  // $('x-tab > .tabs > li').eq(index).addClass('active').siblings().removeClass('active')
  // $('x-tab > .contents > li').eq(index).addClass('active').siblings().removeClass('active')
}

总结

1. 根据选择不同的a，展现出不同的内容（if... else if...），并且是通过锚点来记录页面状态
2. 这是单页应用，无页面跳转
   3.这种方案的缺点是有如上回到顶部的a连接，其锚点为#top，会扰乱页面状态
   4.这种方法无需后端配合

方案二：利用path

• 前端代码

//html（index.html）
<x-tab>
  <ul class="tabs">
    <li><a href="./tab1">tab1</a></li>
    <li><a href="./tab2">tab2</a></li>
  </ul>
  <ul class="contents">
    <li>content1</li>
    <li>content2</li>
  </ul>
</x-tab>
<a href="#top">回到顶部</a>

//css
x-tab{display: block;}
.tabs > li.active {background: red;}
.contents > li {display: none;}
.contents > li.active {display: block;}

//js
selectTab()
$('x-tab').on('click', '.tabs > li > a', (e) => {
  e.preventDefault()
  let $a = $(e.currentTarget)
  let path = $a.attr('href')
  window.history.pushState(null,null,path)
  selectTab()
})

function selectTab(){
  let index = location.pathname.substring(1) || 'tab1'
  index = index.substring(3)
  $('x-tab > .tabs > li').eq(index-1).addClass('active').siblings().removeClass('active')
  $('x-tab > .contents > li').eq(index-1).addClass('active').siblings().removeClass('active')
}

• 后端代码

if (pathName === '/' || pathName === '/tab1' || pathName === '/tab2'){
    let string = fs.readFileSync('./index.html', 'utf8')
    response.setHeader('Content-Type', 'text/html; charset=utf8')
    response.write(string)
    response.end()
}

总结

1. window.history.pushState向url中加入一个路径，并且不刷新页面
2. 这种方案在页面点击的时候没有问题，当刷新的时候，因为路径中多了/tab1或/tab2，所以需要后端支持这个两个路径，并且返回也是当前页面，这也是一个单页应用
3. 这里的回到顶部的a链接（#top）并不能影响到路径，因此，不会影响到页面状态