Vue-Router路由模式的选择和底层原理

本文详细探讨Vue-Router的路由类型，包括Hash模式和History模式的特性，强调History模式对后端配合的需求及IE9兼容问题。深入解析其底层原理，解释如何触发路由更新，并通过源码分析揭示$router和$route如何挂载到Vue实例上，以及router-view和router-link组件的注册过程。适合希望了解Vue-Router工作原理的开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.路由类型

Hash模式：丑，无法使用锚点定位。
History模式：需要后端配合，IE9不兼容(可使用强制刷新处理IE9不兼容)

即可以根据两种模式的特点来进行路由选择。比如：当你的页面需要很多锚点进行定位时< a href="#new_paper" />，点击改链接跳转到页面的新闻部分，那么Hash模式是无法实现的，因为它自身带了#。

2.底层原理

如果我们去看Vue-Router的底层代码可能会优点晦涩难懂，下面总结一下底层原理，有哪些方式可以触发路由的更新呢？下面这张图一目了然：

在这里插入图片描述

理解：

Vue.util.defineReactive_route这个工具库把路由的信息变成了响应式数据，而defineReactive()内部就是调用了Object.defineProperty()和依赖收集实现了路由信息的响应式，而Vue的data也是通过这种方式实现响应式。
图中左边五种方式都会触发调用updateRoute这个API，这个API的功能是修改路由中的响应式数据，当响应式数据被改变后就会自动触发router-view的更新，router-view会根据url和路由匹配规则进行相应组件的展示。

3.源码拓展

先来学习Vue-router的install()

3.1.1 $router和$route是如何挂载到this上的？

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

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

在vue-router的install方法中调用Object.defineProperty进行数据劫持，将$router、$route挂载到Vue的原型上。

注意：this._routerRoot其实就是Vue实例this，看下面源码，this._routerRoot指向了this

Vue.mixin({
   
   
    beforeCreate () {
   
   
      if (isDef(this.$options.router))