前端两种路由实现和使用场景

在学习vue-router时，了解到前端路由的两种模式，本文就前端路由，及其两种模式的原理和使用场景，作一个整理总结。

前端路由概述

什么是路由

路由这个概念最早是后端出现的，简单来讲路由就是用来跟后端服务器进行交互的一种方式，经过不一样的路径，来请求不一样的资源，请求不一样的页面是路由的其中一种功能。

前端路由的诞生

前端路由的出现要从 ajax 开始，有了 Ajax 后，用户交互就不用每次都刷新页面，体验带来了极大的提高。随着技术的发展，简单的异步已经不能知足需求，因此异步的更高级体验出现了——SPA(单页应用)。 SPA 的出现大大提升了 WEB 应用的交互体验。在与用户的交互过程当中，再也不须要从新刷新页面，获取数据也是经过 Ajax 异步获取，页面显示变的更加流畅。 但因为 SPA 中用户的交互是经过 JS 改变 HTML 内容来实现的，页面自己的 url 并无变化，这致使了两个问题：

• SPA 没法记住用户的操做记录，不管是刷新、前进仍是后退，都没法展现用户真实的指望内容。
• SPA 中虽然因为业务的不一样会有多种页面展现形式，但只有一个 url，对 SEO 不友好，不方便搜索引擎进行收录。

前端路由就是为了解决上述问题而出现的。

什么是前端路由

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每一个视图展现形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均经过这个特殊的 url 来实现。 为实现这一目标，咱们须要作到如下二点：

• 改变 url 且不让浏览器像服务器发送请求。
• 能够监听到 url 的变化

接下来要介绍的 hash 模式和 history 模式，就是实现了上面的功能。

Hash模式

原理

• 早期的前端路由的实现就是基于location.hash来实现的，location.hash的值就是URL中#后面的内容 其实现原理就是监听#后面的内容来发起Ajax请求来进行局部更新，而不须要刷新整个页面。
• 使用hashchange事件来监听 URL 的变化，如下这几种状况改变 URL 都会触发 hashchange 事件：浏览器前进后退改变 URL、a标签改变 URL、window.location改变URL。

使用

//html
<ul id="menu">
  <li>
    <a href="#index">首页</a>
  </li>
  <li>
    <a href="#news">资讯</a>
  </li>
  <li>
    <a href="#user">我的中心</a>
  </li>
</ul>
<div id="app"></div>

//js
function hashChange(e){
    let app = document.getElementById('app')
    switch (location.hash) {
      case '#index':
        app.innerHTML = '<h1>这是首页内容</h1>'
        break
      case '#news':
        app.innerHTML = '<h1>这是新闻内容</h1>'
        break
      case '#user':
        app.innerHTML = '<h1>这是我的中心内容</h1>'
        break
      default:
        app.innerHTML = '<h1>404</h1>'
    }
}
window.onhashchange = hashChange
hashChange()
复制代码

优势

• 兼容低版本浏览器，Angular1.x和Vue默认使用的就是hash路由
• 只有#符号以前的内容才会包含在请求中被发送到后端，也就是说就算后端没有对路由全覆盖，可是不会返回404错误
• hash值的改变，都会在浏览器的访问历史中增长一个记录，因此能够经过浏览器的回退、前进按钮控制hash的切换 会覆盖锚点定位元素的功能

缺点

• 不太美观，#后面传输的数据复杂的话会出现问题

History模式

原理

• history 提供了 pushState 和 replaceState 两个方法来记录路由状态，这两个方法改变 URL 不会引发页面刷新
• history 提供相似 hashchange 事件的 popstate 事件，但 popstate 事件有些不一样：经过浏览器前进后退改变 URL 时会触发 popstate 事件，经过pushState/replaceState或a标签改变 URL 不会触发 popstate 事件。好在咱们能够拦截 pushState/replaceState的调用和a标签的点击事件来检测 URL 变化，因此监听 URL 变化能够实现，只是没有 hashchange 那么方便。
• pushState(state, title, url) 和 replaceState(state, title, url)均可以接受三个相同的参数。

使用

//html
<ul id="menu">
  <li>
    <a href="/index">首页</a>
  </li>
  <li>
    <a href="/news">资讯</a>
  </li>
  <li>
    <a href="/user">我的中心</a>
  </li>
</ul>
<div id="app"></div>

//js
document.querySelector('#menu').addEventListener('click',function (e) {
  if(e.target.nodeName ==='A'){
    e.preventDefault()
    let path = e.target.getAttribute('href')  //获取超连接的href，改成pushState跳转，不刷新页面
    window.history.pushState({},'',path)  //修改浏览器中显示的url地址
    render(path)  //根据path，更改页面内容
  }
})

function render(path) {
  let app = document.getElementById('app')
  switch (path) {
    case '/index':
      app.innerHTML = '<h1>这是首页内容</h1>'
      break
    case '/news':
      app.innerHTML = '<h1>这是新闻内容</h1>'
      break
    case '/user':
      app.innerHTML = '<h1>这是我的中心内容</h1>'
      break
    default:
      app.innerHTML = '<h1>404</h1>'
  }
}
window.onpopstate = function (e) {
  render(location.pathname)
}
render('/index')
复制代码

优势

• 使用简单，比较美观
• pushState()设置新的URL能够是任意与当前URL同源的URL，而hash只能改变#后面的内容，所以只能设置与当前URL同文档的URL
• pushState()设置的URL与当前URL如出一辙时也会被添加到历史记录栈中，而hash#后面的内容必须被修改才会被添加到新的记录栈中
• pushState()能够经过stateObject参数添加任意类型的数据到记录中，而hash只能添加短字符串
• pushState()可额外设置title属性供后续使用

缺点

• 前端的URL必须和向发送请求后端URL保持一致，不然会报404错误
• 因为History API的缘故，低版本浏览器有兼容行问题

两种不一样使用场景

• 从上文可见，hash模式下url会带有#，当你但愿url更优雅时，可使用history模式。
• 当使用history模式时，须要注意在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
• 当须要兼容低版本的浏览器时，建议使用hash模式。
• 当须要添加任意类型数据到记录时，可使用history模式。

参考连接：

• 前端框架路由实现
• 前端路由的两种模式
• 两种前端路由（hash模式和history模式）实现原理解析及区别