详解vue 单页应用（spa）前端路由实现原理

写在前面：通常 spa 中前端路由有2种实现方式：

1. window.history
2. location.hash

下面就来介绍下这两种方式具体怎么实现的

一.history

1.history基本介绍

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现spa前端路由是一种主流方法，它有几个原始方法：

1. history.back() - 与在浏览器点击后退按钮相同
2. history.forward() - 与在浏览器中点击按钮向前相同
3. history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
4. 如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

在html5，history对象提出了 pushstate() 方法和 replacestate() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。

2.history.pushstate

pushstate(stateobj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kb)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。

1. stateobj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
2. title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
3. url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

关于pushstate，有几个值得注意的地方：

pushstate方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新

这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错

3.history.replacestate

replacestate(stateobj, title, url) 和pushstate的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushstate一模一样

4.popstate事件

定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

注意：仅仅调用pushstate方法或replacestate方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用javascript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

用法：使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushstate和replacestate方法为当前url所提供的状态对象（即这两个方法的第一个参数）。

5.history实现spa前端路由代码

<a class="api a">a.html</a>
<a class="api b">b.html</a>
 // 注册路由
 document.queryselectorall('.api').foreach(item => {
  item.addeventlistener('click', e => {
  e.preventdefault();
  let link = item.textcontent;
  if (!!(window.history && history.pushstate)) {
   // 支持history api
   window.history.pushstate({name: 'api'}, link, link);
  } else {
   // 不支持,可使用一些polyfill库来实现
  }
  }, false)
 });

 // 监听路由
 window.addeventlistener('popstate', e => {
  console.log({
  location: location.href,
  state: e.state
  })
 }, false)

popstate监听函数里打印的e.state便是history.pushstate()里传入的第一个参数，在这里即为{name: 'api'}

二.hash

1.hash基本介绍

url 中可以带有一个 hash

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

1. 直接更改浏览器地址，在最后面增加或改变#hash；
2. 通过改变location.href或location.hash的值；
3. 通过触发点击带锚点的链接；
4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

2.hash实现spa前端路由代码

 // 注册路由
 document.queryselectorall('.api').foreach(item => {
  item.addeventlistener('click', e => {
  e.preventdefault();
  let link = item.textcontent;
  location.hash = link;
  }, false)
 });

 // 监听路由
 window.addeventlistener('hashchange', e => {
  console.log({
  location: location.href,
  hash: location.hash
  })
 }, false)

hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。

三、两种模式比较

• pushstate设置的新url可以是与当前url同源的任意url；而hash只可修改#后面的部分，故只可设置与当前同文档的url
• pushstate设置的新url可以与当前url一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
• pushstate通过stateobject可以添加任意类型的数据到记录中；而hash只可添加短字符串
• pushstate可额外设置title属性供后续使用

四、history模式的一个问题

我们知道对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操作通过ajax完成，不会根据url重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。
hash模式仅改变hash部分的内容，而hash部分是不会包含在http请求中的：

http://oursite.com/#/user/id // 如重新请求只会发送http://oursite.com/

故在hash模式下遇到根据url请求页面的情况不会有问题。

而history模式则会将url修改得就和正常请求后端的url一样

http://oursite.com/user/id

在此情况下重新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 url 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 node.js 作后台，可以使用服务端的路由来匹配 url，当没有匹配到路由的时候返回 404，从而实现 fallback。

参考资料：

1、浏览器history api ：https://developer.mozilla.org/zh-cn/docs/web/api/history_api

2、解决history模式访问404的方案：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%e5%90%8e%e7%ab%af%e9%85%8d%e7%bd%ae%e4%be%8b%e5%ad%90

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。