An article to talk about the implementation principle of Vue-Router

I believe that most students are familiar with the concept of routing. We will use Vue-Router## when we develop actual projects with Vue # This official plug-in helps us solve routing problems. Its function is to map to different views according to different paths. This article no longer describes the basic use of routing and API. Students who are unclear can refer to the official documentation vue-router3 corresponds to vue2 and vue-router4 corresponds to vue3.

Today we mainly talk about the implementation principle of

Vue-Router. Interested friends can continue to read below. Big guys, please stop.

The vue-router version of this article is 3.5.3

Routing

Since we are analyzing routing, let’s talk about it first What is routing, what is back-end routing, and what is front-end routing.

Routing is to display different content or pages according to different

url addresses. The concept of early routing appeared on the back end. The page is returned after server-side rendering. As the page becomes more and more The more complex it becomes, the greater the pressure on the server. Later, the emergence of ajax asynchronous refresh enabled the front end to manage url. At this time, front-end routing appeared. [Learning video sharing: vue video tutorial, web front-end video]

Let’s talk about back-end routing first

Back-end Routing

Back-end routing can also be called server-side routing, because for the server, when it receives the

HTTP request from the client, it will URL to find the corresponding mapping function, then execute the function and send the return value of the function to the client.

For the simplest static resource server, it can be considered that all mapping functions of

URL are a file reading operation. For dynamic resources, the mapping function may be a database reading operation, or it may perform some data processing, etc.

Then based on the read data, the corresponding template is used on the server side to render the page, and then the rendered

HTML page is returned. The early jsp was this model.

Front-end routing

As I just introduced, when the front-end and back-end are not separated, the server directly returns the entire

HTML to the user. Every small operation will cause the entire page to refresh (in addition, the previous network speed was still very slow, so the user experience can be imagined).

In the late 1990s, Microsoft first implemented the

ajax (Asynchronous JavaScript And XML) technology, so that users do not need to refresh the entire page every time they operate, and the user experience is improved. Greatly improved.

Although the data can be obtained asynchronously without requesting the entire webpage for each click, the jump between pages will still load the entire webpage. The experience is not particularly good. Is there a better way?

At this point, a more advanced version of the asynchronous interactive experience

SPA Single Page Application appears. Single-page applications are not only refresh-free during page interactions, but also page jumps are refresh-free. Since the page jump is non-refreshing, the HTML page is no longer returned to the backend request.

The page jump does not get the new

HTML page from the backend, so what should I do? So there is the current front-end routing.

It can be understood that front-end routing is to hand over the previous task of the server to return different pages according to different URLs to the front-end. During this process, js will detect changes in the URL in real time, thereby changing the displayed content.

The advantage of front-end routing is that the user experience is good. User operations or page jumps will not refresh the page and can be quickly displayed to the user. The disadvantage is that the first screen loads slowly because it requires

js to dynamically render the display content. And because the content is js dynamically rendered, it is not conducive to SEO.

Now we officially enter the

Vue-Router principle analysis stage.

Analysis of Vue-Router.install method

Let’s take a look at

install.js first. This method will be in Vue.use(VueRouter) when called.

// install.js

import View from './components/view'
import Link from './components/link'

export let _Vue

export function install (Vue) {
  // 不会重复安装
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue

  const isDef = v => v !== undefined

  // 为router-view组件关联路由组件
  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    // 调用vm.$options._parentVnode.data.registerRouteInstance方法
    // 而这个方法只在router-view组件中存在，router-view组件定义在(../components/view.js @71行)
    // 所以，如果vm的父节点为router-view，则为router-view关联当前vm，即将当前vm做为router-view的路由组件
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  Vue.mixin({
    beforeCreate () {
      // 这里只会进来一次，因为只有Vue根实例才会有router属性。
      if (isDef(this.$options.router)) {
        // 所以这里的this就是Vue根实例
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        // 将 _route 变成响应式
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        // 子组件会进入这里，这里也是把Vue根实例保存带_routerRoot属性上
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      // 为router-view组件关联路由组件
      registerInstance(this, this)
    },
    destroyed () {
      // destroyed hook触发时，取消router-view和路由组件的关联
      registerInstance(this)
    }
  })

  // 在原型上注入$router、$route属性，方便快捷访问
  Object.defineProperty(Vue.prototype, '$router', {
    // 上面说到每个组件的_routerRoot都是Vue根实例，所以都能访问_router
    get () { return this._routerRoot._router }
  })

  // 每个组件访问到的$route，其实最后访问的都是Vue根实例的_route
  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  // 注册router-view、router-link两个全局组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

Mainly did the following things:

避免重复安装

为了确保 install 逻辑只执行一次，用了 install.installed 变量做已安装的标志位。

传递Vue引用减少打包体积

用一个全局的 _Vue 来接收参数 Vue，因为作为 Vue 的插件对 Vue 对象是有依赖的，但又不能去单独去 import Vue，因为那样会增加包体积，所以就通过这种方式拿到 Vue 对象。

注册全局混入

Vue-Router 安装最重要的一步就是利用 Vue.mixin，在beforeCreate和destroyed生命周期函数中注入路由逻辑。

Vue.mixin我们知道就是全局 mixin，所以也就相当于每个组件的beforeCreate和destroyed生命周期函数中都会有这些代码，并在每个组件中都会运行。

Vue.mixin({
  beforeCreate () {
    if (isDef(this.$options.router)) {
      this._routerRoot = this
      this._router = this.$options.router
      this._router.init(this)
      Vue.util.defineReactive(this, '_route', this._router.history.current)
    } else {
      this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    }
    registerInstance(this, this)
  },
  destroyed () {
    registerInstance(this)
  }
})

在这两个钩子中，this是指向当时正在调用钩子的vue实例。

这两个钩子中的逻辑，在安装流程中是不会被执行的，只有在组件实例化时执行到钩子时才会被调用

先看混入的 beforeCreate 钩子函数

它先判断了this.$options.router是否存在，我们在new Vue({router})时，router才会被保存到到Vue根实例的$options上，而其它Vue实例的$options上是没有router的，所以if中的语句只在this === new Vue({router})时，才会被执行，由于Vue根实例只有一个，所以这个逻辑只会被执行一次。

对于根 Vue 实例而言，执行该钩子函数时定义了 this._routerRoot 表示它自身（Vue根实例）；this._router 表示 VueRouter 的实例 router，它是在 new Vue 的时候传入的；

另外执行了 this._router.init() 方法初始化 router，这个逻辑在后面讲初始化的时候再介绍。

然后用 defineReactive 方法把 this._route 变成响应式对象，保证_route变化时，router-view会重新渲染，这个我们后面在router-view组件中会细讲。

我们再看下else中具体干了啥

主要是为每个组件定义_routerRoot，对于子组件而言，由于组件是树状结构，在遍历组件树的过程中，它们在执行该钩子函数的时候 this._routerRoot 始终指向的离它最近的传入了 router 对象作为配置而实例化的父实例(也就是永远等于根实例)。

所以我们可以得到，在每个vue组件都有 this._routerRoot === vue根实例、this._routerRoot._router === router对象

对于 beforeCreate 和 destroyed 钩子函数，它们都会执行 registerInstance 方法，这个方法的作用我们也是之后会介绍。

添加$route、$router属性

接着给 Vue 原型上定义了 $router 和 $route 2 个属性的 get 方法，这就是为什么我们可以在任何组件实例上都可以访问 this.$router 以及 this.$route。

Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})

Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})

我们可以看到，$router其实返回的是this._routerRoot._router，也就是vue根实例上的router，因此我们可以通过this.$router来使用router的各种方法。

$route其实返回的是this._routerRoot._route，其实就是this._router.history.current，也就是目前的路由对象，这个后面会细说。

注册全局组件

通过 Vue.component 方法定义了全局的 <router-link></router-link> 和 <router-view></router-view> 2 个组件，这也是为什么我们在写模板的时候可以直接使用这两个标签，它们的作用我想就不用笔者再说了吧。

钩子函数的合并策略

最后设置路由组件的beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate守卫的合并策略。

总结

那么到此为止，我们分析了 Vue-Router 的安装过程，Vue 编写插件的时候通常要提供静态的 install 方法，我们通过 Vue.use(plugin) 时候，就是在执行 install 方法。Vue-Router 的 install 方法会给每一个组件注入 beforeCreate 和 destoryed 钩子函数，在beforeCreate 做一些私有属性定义和路由初始化工作。并注册了两个全局组件，然后设置了钩子函数合并策略。在destoryed 做了一些销毁工作。

下面我们再来看看Vue-Router的实例化。

分析init方法

前面我们提到了在 install 的时候会执行 VueRouter 的 init 方法（ this._router.init(this) ），那么接下来我们就来看一下 init 方法做了什么。

init (app: any /* Vue component instance */) {
  // ...

  this.apps.push(app)

  // ...

  // main app previously initialized
  // return as we don't need to set up new history listener
  if (this.app) {
    return
  }

  this.app = app

  const history = this.history
  
  if (history instanceof HTML5History || history instanceof HashHistory) {
    const handleInitialScroll = routeOrError => {
      const from = history.current
      const expectScroll = this.options.scrollBehavior
      const supportsScroll = supportsPushState && expectScroll

      if (supportsScroll && 'fullPath' in routeOrError) {
        handleScroll(this, routeOrError, from, false)
      }
    }
    
    // 1.setupListeners 里会对 hashchange或popstate事件进行监听
    const setupListeners = routeOrError => {
      history.setupListeners()
      handleInitialScroll(routeOrError)
    }
    // 2.初始化导航
    history.transitionTo(
      history.getCurrentLocation(),
      setupListeners,
      setupListeners
    )
  }

  // 3.路由全局监听，维护当前的route 
  // 当路由变化的时候修改app._route的值
  // 由于_route是响应式的，所以修改后相应视图会同步更新
  history.listen(route => {
    this.apps.forEach(app => {
      app._route = route
    })
  })
}

这里主要做了如下几件事情：

设置了路由监听

const setupListeners = routeOrError => {
  history.setupListeners()
  handleInitialScroll(routeOrError)
}

这里会根据当前路由模式监听hashchange或popstate事件，当事件触发的时候，会进行路由的跳转。（后面说到路由模式的时候会细说）

初始化导航

history.transitionTo(
  history.getCurrentLocation(),
  setupListeners,
  setupListeners
)

进入系统会进行初始化路由匹配，渲染对应的组件。因为第一次进入系统，并不会触发hashchange或者popstate事件，所以第一次需要自己手动匹配路径然后进行跳转。

路由全局监听

history.listen(route => {
  this.apps.forEach(app => {
    app._route = route
  })
})

当路由变化的时候修改app._route的值。由于_route是响应式的，所以修改后相应视图会同步更新。

总结

这里主要是做了一些初始化工作。根据当前路由模式监听对应的路由事件。初始化导航，根据当前的url渲染初始页面。最后切换路由的时候修改_route，由于_route是响应式的，所以修改后相应视图会同步更新。

分析VueRouter实例化

实例化就是我们new VueRouter({routes})的过程，我们来重点分析下VueRouter的构造函数。

constructor (options: RouterOptions = {}) {
  // ...
  
  // 参数初始化
  this.app = null
  this.apps = []
  this.options = options
  this.beforeHooks = []
  this.resolveHooks = []
  this.afterHooks = []
  // 创建matcher
  this.matcher = createMatcher(options.routes || [], this)

  // 设置默认模式和做不支持 H5 history 的降级处理
  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

  // 根据不同的 mode 实例化不同的 History 对象
  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}`)
      }
  }
}

这里主要做了如下几件事情：

初始化参数

我们看到在最开始有些参数的初始化，这些参数到底是什么呢？

this.app 用来保存根 Vue 实例。

this.apps 用来保存持有 $options.router 属性的 Vue 实例。

this.options 保存传入的路由配置，也就是前面说的RouterOptions。

this.beforeHooks、 this.resolveHooks、this.afterHooks 表示一些钩子函数。

this.fallback 表示在浏览器不支持 history 新api的情况下，根据传入的 fallback 配置参数，决定是否回退到hash模式。

this.mode 表示路由创建的模式。

创建matcher

matcher，匹配器。简单理解就是可以通过url找到我们对应的组件。这一块内容较多，这里笔者就不再详细分析了。

确定路由模式

路由模式平时都会只说两种，其实在vue-router总共实现了 hash、history、abstract 3 种模式。

VueRouter会根据options.mode、options.fallback、supportsPushState、inBrowser来确定最终的路由模式。

如果没有设置mode就默认是hash模式。

确定fallback值，只有在用户设置了mode:history并且当前环境不支持pushState且用户没有主动声明不需要回退(没设置fallback值位undefined)，此时this.fallback才为true，当fallback为true时会使用hash模式。（简单理解就是如果不支持history模式并且只要没设置fallback为false，就会启用hash模式）

如果最后发现处于非浏览器环境，则会强制使用abstract模式。

实例化路由模式

根据mode属性值来实例化不同的对象。VueRouter的三种路由模式，主要由下面的四个核心类实现

• History

  • 基础类
  • 位于src/history/base.js

• HTML5History

  • 用于支持pushState的浏览器
  • src/history/html5.js

• HashHistory

  • 用于不支持pushState的浏览器
  • src/history/hash.js

• AbstractHistory

  • 用于非浏览器环境(服务端渲染)
  • src/history/abstract.js

HTML5History、HashHistory、AbstractHistory三者都是继承于基础类History。

这里我们详细分析下HTML5History和HashHistory类。

HTML5History类

当我们使用history模式的时候会实例化HTML5History类

// src/history/html5.js

...

export class HTML5History extends History {
  _startLocation: string

  constructor (router: Router, base: ?string) {
    // 调用父类构造函数初始化
    super(router, base)

    this._startLocation = getLocation(this.base)
  }

  // 设置监听，主要是监听popstate方法来自动触发transitionTo
  setupListeners () {
    if (this.listeners.length > 0) {
      return
    }

    const router = this.router
    const expectScroll = router.options.scrollBehavior
    const supportsScroll = supportsPushState && expectScroll
    
    // 若支持scroll,初始化scroll相关逻辑
    if (supportsScroll) {
      this.listeners.push(setupScroll())
    }

    const handleRoutingEvent = () => {
      const current = this.current

      // 某些浏览器，会在打开页面时触发一次popstate 
      // 此时如果初始路由是异步路由,就会出现`popstate`先触发,初始路由后解析完成，进而导致route未更新 
      // 所以需要避免
      const location = getLocation(this.base)
      if (this.current === START && location === this._startLocation) {
        return
      }
      
      // 路由地址发生变化，则跳转，如需滚动则在跳转后处理滚动
      this.transitionTo(location, route => {
        if (supportsScroll) {
          handleScroll(router, route, current, true)
        }
      })
    }
    
    // 监听popstate事件
    window.addEventListener('popstate', handleRoutingEvent)
    this.listeners.push(() => {
      window.removeEventListener('popstate', handleRoutingEvent)
    })
  }

  // 可以看到 history模式go方法其实是调用的window.history.go(n)
  go (n: number) {
    window.history.go(n)
  }

  // push方法会主动调用transitionTo进行跳转
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

  // replace方法会主动调用transitionTo进行跳转
  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      replaceState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

  ensureURL (push?: boolean) {
    if (getLocation(this.base) !== this.current.fullPath) {
      const current = cleanPath(this.base + this.current.fullPath)
      push ? pushState(current) : replaceState(current)
    }
  }

  getCurrentLocation (): string {
    return getLocation(this.base)
  }
}

export function getLocation (base: string): string {
  let path = window.location.pathname
  const pathLowerCase = path.toLowerCase()
  const baseLowerCase = base.toLowerCase()
  // base="/a" shouldn't turn path="/app" into "/a/pp"
  // https://github.com/vuejs/vue-router/issues/3555
  // so we ensure the trailing slash in the base
  if (base && ((pathLowerCase === baseLowerCase) ||
    (pathLowerCase.indexOf(cleanPath(baseLowerCase + '/')) === 0))) {
    path = path.slice(base.length)
  }
  return (path || '/') + window.location.search + window.location.hash
}

可以看到HTML5History类主要干了如下几件事。

• 继承于History类，并调用父类构造函数初始化。

• 实现了setupListeners方法，在该方法中检查了是否需要支持滚动行为，如果支持，则初始化滚动相关逻辑，监听了popstate事件，并在popstate触发时自动调用transitionTo方法。

• 实现了go、push、replace等方法，我们可以看到，history模式其实就是使用的history api。

// 可以看到 history模式go方法其实是调用的window.history.go(n)
go (n: number) {
  window.history.go(n)
}

// push、replace调用的是util/push-state.js，里面实现了push和replace方法
// 实现原理也是使用的history api，并且在不支持history api的情况下使用location api

export function pushState (url?: string, replace?: boolean) {
  ...
  const history = window.history
  try {
    if (replace) {
      const stateCopy = extend({}, history.state)
      stateCopy.key = getStateKey()
      // 调用的 history.replaceState
      history.replaceState(stateCopy, '', url)
    } else {
      // 调用的 history.pushState
      history.pushState({ key: setStateKey(genStateKey()) }, '', url)
    }
  } catch (e) {
    window.location[replace ? 'replace' : 'assign'](url)
  }
}

export function replaceState (url?: string) {
  pushState(url, true)
}

总结

所以history模式的原理就是在js中路由的跳转（也就是使用push和replace方法）都是通过history api，history.pushState 和 history.replaceState两个方法完成，通过这两个方法我们知道了路由的变化，然后根据路由映射关系来实现页面内容的更新。

对于直接点击浏览器的前进后退按钮或者js调用 this.$router.go()、this.$router.forward()、this.$router.back()、或者原生js方法history.back() 、history.go()、history.forward()的，都会触发popstate事件，通过监听这个事件我们就可以知道路由发生了哪些变化然后来实现更新页面内容。

注意history.pushState 和 history.replaceState这两个方法并不会触发popstate事件。在这两个方法里面他是有手动调用transitionTo方法的。

接下来我们再来看看HashHistory类

HashHistory类

当我们使用hash模式的时候会实例化HashHistory类。

//src/history/hash.js

...

export class HashHistory extends History {
  constructor (router: Router, base: ?string, fallback: boolean) {
    super(router, base)
    // check history fallback deeplinking
    if (fallback && checkFallback(this.base)) {
      return
    }
    ensureSlash()
  }

  setupListeners () {
    if (this.listeners.length > 0) {
      return
    }

    const router = this.router
    const expectScroll = router.options.scrollBehavior
    const supportsScroll = supportsPushState && expectScroll

    if (supportsScroll) {
      this.listeners.push(setupScroll())
    }

    const handleRoutingEvent = () => {
      const current = this.current
      if (!ensureSlash()) {
        return
      }
      this.transitionTo(getHash(), route => {
        if (supportsScroll) {
          handleScroll(this.router, route, current, true)
        }
        if (!supportsPushState) {
          replaceHash(route.fullPath)
        }
      })
    }
    // 事件优先使用 popstate
    // 判断supportsPushState就是通过return window.history && typeof window.history.pushState === 'function'
    const eventType = supportsPushState ? 'popstate' : 'hashchange'
    window.addEventListener(
      eventType,
      handleRoutingEvent
    )
    this.listeners.push(() => {
      window.removeEventListener(eventType, handleRoutingEvent)
    })
  }
  
  // 其实也是优先使用history的pushState方法来实现，不支持再使用location修改hash值
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(
      location,
      route => {
        pushHash(route.fullPath)
        handleScroll(this.router, route, fromRoute, false)
        onComplete && onComplete(route)
      },
      onAbort
    )
  }

  // 其实也是优先使用history的replaceState方法来实现，不支持再使用location修改replace方法
  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(
      location,
      route => {
        replaceHash(route.fullPath)
        handleScroll(this.router, route, fromRoute, false)
        onComplete && onComplete(route)
      },
      onAbort
    )
  }

  // 也是使用的history go方法
  go (n: number) {
    window.history.go(n)
  }

  ensureURL (push?: boolean) {
    const current = this.current.fullPath
    if (getHash() !== current) {
      push ? pushHash(current) : replaceHash(current)
    }
  }

  getCurrentLocation () {
    return getHash()
  }
}

function checkFallback (base) {
  const location = getLocation(base)
  if (!/^\/#/.test(location)) {
    window.location.replace(cleanPath(base + '/#' + location))
    return true
  }
}

function ensureSlash (): boolean {
  const path = getHash()
  if (path.charAt(0) === '/') {
    return true
  }
  replaceHash('/' + path)
  return false
}

// 获取 # 后面的内容
export function getHash (): string {
  // We can't use window.location.hash here because it's not
  // consistent across browsers - Firefox will pre-decode it!
  let href = window.location.href
  const index = href.indexOf('#')
  // empty path
  if (index < 0) return &#39;&#39;

  href = href.slice(index + 1)

  return href
}

function getUrl (path) {
  const href = window.location.href
  const i = href.indexOf(&#39;#&#39;)
  const base = i >= 0 ? href.slice(0, i) : href
  return `${base}#${path}`
}

function pushHash (path) {
  if (supportsPushState) {
    pushState(getUrl(path))
  } else {
    window.location.hash = path
  }
}

function replaceHash (path) {
  if (supportsPushState) {
    replaceState(getUrl(path))
  } else {
    window.location.replace(getUrl(path))
  }
}

可以看到HashHistory类主要干了如下几件事。

• 继承于History类，并调用父类构造函数初始化。这里比HTML5History多了回退操作，所以，需要将history模式的url替换成hash模式，即添加上#，这个逻辑是由checkFallback实现的

• 实现了setupListeners方法，在该方法中检查了是否需要支持滚动行为，如果支持，则初始化滚动相关逻辑。 监听了popstate事件或hashchange事件，并在相应事件触发时，调用transitionTo方法实现跳转。

通过const eventType = supportsPushState ? 'popstate' : 'hashchange'我们可以发现就算是hash模式优先使用的还是popstate事件。

• 实现了go、push、replace等方法。

我们可以看到，hash模式实现的push、replace方法其实也是优先使用history里面的方法，也就是history api。

// 可以看到 hash 模式go方法其实是调用的window.history.go(n)
go (n: number) {
  window.history.go(n)
}

// 在支持新的history api情况下优先使用history.pushState实现
// 否则使用location api
function pushHash (path) {
  if (supportsPushState) {
    pushState(getUrl(path))
  } else {
    window.location.hash = path
  }
}

// 在支持新的history api情况下优先使用history.replaceState实现
// 否则使用location api
function replaceHash (path) {
  if (supportsPushState) {
    replaceState(getUrl(path))
  } else {
    window.location.replace(getUrl(path))
  }
}

总结

在浏览器链接里面我们改变hash值是不会重新向后台发送请求的，也就不会刷新页面。并且每次 hash 值的变化，还会触发hashchange 这个事件。

所以hash模式的原理就是通过监听hashchange事件，通过这个事件我们就可以知道 hash 值发生了哪些变化然后根据路由映射关系来实现页面内容的更新。（这里hash值的变化不管是通过js修改的还是直接点击浏览器的前进后退按钮都会触发hashchange事件）

对于hash模式，如果是在浏览器支持history api情况下，hash模式的实现其实是和history模式一样的。只有在不支持history api情况下才会监听hashchange事件。这个我们可以在源码中看出来。

总结

总的来说就是使用 Vue.util.defineReactive 将实例的 _route 设置为响应式对象。在push, replace方法里会主动更新属性 _route。而 go，back，forward，或者通过点击浏览器前进后退的按钮则会在 hashchange 或者 popstate 的回调中更新 _route。_route 的更新会触发 RoterView 的重新渲染。

对于第一次进入系统，并不会触发hashchange或者popstate事件，所以第一次需要自己手动匹配路径然后通过transitionTo方法进行跳转，然后渲染对应的视图。

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of An article to talk about the implementation principle of Vue-Router. For more information, please follow other related articles on the PHP Chinese website!