前言

相信不少伙伴都听过SPA（单页面应用），SPA指的是在一个应用中只有一个主的index.html页面，区别于多页面应用（多个index.html页面）。SPA的优点如下：
1、交互体验良好
单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅，用户的交互体验得到了提升和改善。
2、前后端分离
良好的前后端分离机制，后段无需负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
3、服务器压力减小，节约服务器资源
单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，所以服务器的吞吐能力会得到大幅的提高，吞吐量可提升几倍甚至几十倍以上。
而对于单页面应用，它是如何在一个页面中实现视图更新的呢？其中最重要的一个概念就是前端路由，那么接下来就做一个简单的介绍和分析：

vue-router 介绍

vue-router是Vue.js官方提供的路由插件，专门配合vue实现路由跳转功能，需要使用Vue.use()进行安装。区别于传统的通过超链接的形式跳转，实现了在页面无刷新的状态下更新页面视图，用户体验感更好。

vue-router底层原理

vue-router的实现流程主要由如下几个步骤：
1、url发生改变
2、触发监听事件
3、改变vue-router里面的current变量
4、监视current变量（变量的监视者）
5、获取对应的组件
6、render新组件
7、页面重新渲染

更为详细的底层原理这里便不再赘述，可以直接去看vue-router源码，纸上得来终觉浅，绝知此事要躬行，自己去翻源码捋一捋，会有不一样的收获和成长。

路由的三种模式

...
export default class VueRouter {
  ...
  static install: () => void;
  constructor(options: RouterOptions = {}) {
    let mode = options.mode || "hash";
    this.fallback =
      mode === "history" && !supportsPushState && options.fallback !== false;
    if (this.fallback) {
      mode = "hash";
    }
    if (!inBrowser) {
      mode = "abstract";
    }
    this.mode = mode;

    switch (mode) {
      case "history":
        this.history = new HTML5History(this, options.base);
        break;
      case "hash":
        this.history = new HashHistory(this, options.base, this.fallback);
        break;
      case "abstract":
        this.history = new AbstractHistory(this, options.base);
        break;
      default:
        if (process.env.NODE_ENV !== "production") {
          assert(false, `invalid mode: ${mode}`);
        }
    }
  }
  ...
}

上面是vue-router源码片段，由此可知vue-router 有三种路由模式：hash模式、history模式和abstract模式，比较常用的是hash模式和history模式。

一般场景下，hash 和 history 都可以用，除非你更在意颜值或者有强迫症，毕竟/# 符号夹杂在 URL 里我是觉得看起来确实有些不太美丽。如果不想浏览器url里显示很丑的 hash路由网址，我们可以用路由的 history 模式，这种模式利用 history.pushState API 来完成，URL 跳转而无须重新加载页面（后文会详解）。

hash模式与history模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。

看到这里，小伙伴可以思考一下，在前端里面如何不刷新页面实现跳转？

目前浏览器中有两种方式可以不刷新页面，实现跳转：1.HTML5的historyAPI，2.通过/#。

mode参数作用

我们从上面的vue-router源码里看到一个非常重要的参数–mode，从代码逻辑里可以解读出mode的作用

作为参数传入的字符串属性mode只是一个标记，用来指示实际起作用的对象属性history的实现类：HashHistory，HTML5History和AbstractHistory。
在初始化对应的history之前，会对mode做一些校验：若浏览器不支持HTML5History方式（通过supportsPushState变量判断），则mode强制设为’hash’；若不是在浏览器环境下运行（node环境），则mode强制设为’abstract’。
VueRouter类中的onReady(), push()等方法只是一个代理，实际是调用的具体history对象的对应方法，在init()方法中初始化时，也是根据history对象具体的类别执行不同操作。

注：如果浏览器不支持，'history’模式会回滚为’hash’模式。不在浏览器环境下（node环境）运行会强制为’abstract’模式。

三种模式源码调用逻辑

history模式

history -> HTML5History -> window.history.pushState()、window.history.go(n)、window.history.replaceState()

app是Vue根实例，以下是源码调用逻辑。

this.$router.push() -> VueRouter.prototype.push() -> HTML5History.prototype.push() -> History.prototype.transitionTo() -> History.prototype.confirmTransition() -> History.prototype.updateRoute() -> { app._route = route } -> defineReactive(_route) setter -> dep.notify() -> Dep.prototype.notify() -> Watcher.prototype.update() -> Vue.prototype.$nextTick() ->

hash模式

hash -> HashHistory ->
支持window.history -> window.history.pushState()、window.history.go(n)、window.history.replaceState()
不支持window.history -> window.location.hash = path、window.history.go(n)、window.location.replace(url)

this.$router.push() -> VueRouter.prototype.push() -> HashHistory.prototype.push() -> History.prototype.transitionTo() -> History.prototype.confirmTransition() -> History.prototype.updateRoute() -> { app._route = route } -> defineReactive(_route) setter -> dep.notify() -> Dep.prototype.notify() -> Watcher.prototype.update() -> vm.render()

abstract模式

abstract -> AbstractHistory -> node环境下

history模式优点

history最大的优点就是长得美观，除此之外还有如下优势：

pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改/#后面的部分，故只可设置与当前同文档的URL；
*
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串；
*
pushState可额外设置title属性供后续使用；
*
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误。

大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

利用URL中的hash（“/#”），修改/#后面的地址，不会重新请求页面，但是修改/#前面的地址会重新请求页面。

//在浏览器的访问历史中增加一个记录，并且不会重新请求页面，只能修改#后面的部分
window.location.hash='#/b/c'

利用History API在 HTML5中新增的方法

//在浏览器的访问历史中增加一个记录，并且不会重新请求页面，只能同源跳转
window.history.pushState({name:'哈哈哈哈'},'首页','http://localhost:8080/s/b')

r o u t e r 和 router和router和route通过Object.defineProperty实现代理，当调用this.$router.push()的时候，会拦截vue原型上的get操作,返回对应的Vue._routerRoot._router的值。

Object.defineProperty(Vue.prototype, "$router", {
  get() {
    return this._routerRoot._router;
  },
});
Object.defineProperty(Vue.prototype, "$route", {
  get() {
    return this._routerRoot._route;
  },
});
Vue.component("RouterView", View);
Vue.component("RouterLink", Link);

之所以视图可以更新，是因为_route是响应式的，即当 _route变化时，会拦截set操作，调用dep.notify()更新视图。

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。

从总结起来，history的缺点如下：

在用户手动输入地址或刷新页面时会发起url请求，后端需要配置index.html页面用户匹配不到静态资源的情况，否则会出现404错误，但是有解决方案。
兼容性比较差，pushState() 和 replaceState() 方法，需要特定浏览器的支持。

从辩证法的角度说，任何事物都具有两面性，要全面客观的看待事物。history模式和hash模式都有自己的优缺点，项目中采用哪种模式要根据实际情况来定，具体问题具体分析，鞋子合不合穿自己最清楚。

从文件系统直接加载Vue单页应用

要想从文件系统直接加载Vue单页应用而不借助后端服务器，除了打包后的一些路径设置外，还需确保vue-router使用的是hash模式。

vue-router路由优缺点

优点：
用户体验好良好，不需要每次都从服务器全部获取数据，快速展现给用户，并节省了服务器资源。
缺点：
不利于网页的SEO。
使用浏览器的前进，后退键的时候会重新发送请求，降低了缓存的使用率
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置，需要指定位置跳转等需求时困难。

总结与体会

vue-router是vue开发中常见到不能再常见的的一个组件技术了，但是并不是每个人都愿意去花时间去深究它的原理和使用。在工作之余，我花了一些时间去学习它，研究它，加深了对vue-router的理解。每项小的技术都有它的独特之美，我们需要去发现这种美，毕竟万丈高楼平地起，需要牢固的根基也需要每一块砖的堆砌。对于工作和生活，我们也应保持同样的态度，事情不管多小，我们应尽力做好每一件事，做好每一件小事，才能做好能做好更大的事。不积跬步无以至千里。不积小流，无以成江海。

下一步计划：手写vue-router。

谈谈vue-router的实现原理

前言