前言

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来说就是用户只需要加载一次页面就可以不再请求，当点击其他子页面时只会有相应的URL改变而不会重新加载。

我们可以将实现路由的过程分为两部分:

更新URL页面不刷新

监听URL的变化，执行页面替换逻辑

现在主流有2种实现方案:

history.pushState等触发popstate事件

location.hash的变化触发hashchange事件

接下来我们一步一步看Vue-router如何实现的

Vue-router源码解剖

构造器

请各位同学翻到 src/index.js 第18行

export default class VueRouter {  static install: () => void;  static version: string;  app: any;  apps: Array
    
     ;  ready: boolean;  readyCbs: Array
     
      ;  options: RouterOptions;  mode: string;  history: HashHistory | HTML5History | AbstractHistory;  matcher: Matcher;  fallback: boolean;  beforeHooks: Array
      ;  resolveHooks: Array
      ;  afterHooks: Array
      ;  constructor (options: RouterOptions = {}) {     this.app = null    this.apps = []    this.options = options    this.beforeHooks = []    this.resolveHooks = []    this.afterHooks = []    this.matcher = createMatcher(options.routes || [], this)    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}`)        }    }  }

构造器接收一个options参数

默认mode为 "hash"，如果显示传入参数mode为"history"，则进行是否支持的"history"的判断

this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false

supportsPushState方法里面判断了是否为浏览器环境且当前浏览器版本支持history

options.fallback用来控制路由，在设置了mode为"history"但是当前浏览器环境不支持"history"的情况下是否应该回调判断，并重新设置mode为"hash"。

设置fallback为false本质上是为了让"router-link"在IE9上可以完整的页面刷新，如果是在hash模式下面不支持SSR，设置为false，会让那些在ie9服务端渲染的app更好用。(这段话没具体应用过)

之后根据不同的mode，来执行不同的方案

HTML5History

构造器

构造器接收2个参数，router和base

router是在定义新路由的时候创建的对象

base如果没有传，则为undefined，

"？"这是通过一个名为flow的外部工具为javascript加上强类型检查的功能，不影响编译和运行。直接无视就好。

调动History的构造方法，History为 HTML5History，HashHistory，AbstractHistory的超类

在History的构造方法中，

如果base为undefined，查找是否有base的元素，有就赋值，没有就'/'

之后

const expectScroll = router.options.scrollBehavior    const supportsScroll = supportsPushState && expectScroll    if (supportsScroll) {      setupScroll()    }

判断路由参数，是否控制路由页面滚动条行为