vue：路由实现原理

超、凢脫俗 2022-04-23 21:28 243阅读 0赞

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

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

*  利用`URL`中的`hash`(`"#"`);
 *  利用`History interface`在`HTML5`中新增的方法;

`vue-router`是`Vue.js`框架的路由插件，它是通过`mode`这一参数控制路由的实现模式的：

const router=new VueRouter({
        mode:'history',
        routes:[...]
    })

创建`VueRouter`的实例对象时，`mode`以构造参数的形式传入。

src/index.js
    
    export default class VueRouter{
        mode: string; // 传入的字符串参数，指示history类别
      history: HashHistory | HTML5History | AbstractHistory; // 实际起作用的对象属性，必须是以上三个类的枚举
      fallback: boolean; // 如浏览器不支持，'history'模式需回滚为'hash'模式
      
      constructor (options: RouterOptions = {}) {
        
        let mode = options.mode || 'hash' // 默认为'hash'模式
        this.fallback = mode === 'history' && !supportsPushState // 通过supportsPushState判断浏览器是否支持'history'模式
        if (this.fallback) {
          mode = 'hash'
        }
        if (!inBrowser) {
          mode = 'abstract' // 不在浏览器环境下运行需强制为'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}`)
            }
        }
      }
    
      init (app: any /* Vue component instance */) {
        
        const history = this.history
    
        // 根据history的类别执行相应的初始化操作和监听
        if (history instanceof HTML5History) {
          history.transitionTo(history.getCurrentLocation())
        } else if (history instanceof HashHistory) {
          const setupHashListener = () => {
            history.setupListeners()
          }
          history.transitionTo(
            history.getCurrentLocation(),
            setupHashListener,
            setupHashListener
          )
        }
    
        history.listen(route => {
          this.apps.forEach((app) => {
            app._route = route
          })
        })
      }
    
      // VueRouter类暴露的以下方法实际是调用具体history对象的方法
      push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
        this.history.push(location, onComplete, onAbort)
      }
    
      replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
        this.history.replace(location, onComplete, onAbort)
      }
    }

1.  作为参数传入的字符串属性`mode`只是一个标记，用来指示实际起作用的对象属性`history`的实现类，两者对应关系：

modehistory:
            'history':HTML5History;
            'hash':HashHistory;
            'abstract':AbstractHistory;

1.  在初始化对应的`history`之前，会对`mode`做一些校验：若浏览器不支持`HTML5History`方式(通过`supportsPushState`变量判断)，则`mode`设为`hash`;若不是在浏览器环境下运行，则`mode`设为`abstract`;
2.  `VueRouter`类中的`onReady()`,`push()`等方法只是一个代理，实际是调用的具体`history`对象的对应方法，在`init()`方法中初始化时，也是根据`history`对象具体的类别执行不同操作

# `HashHistory` #

`hash`(`"#"`)符号的本来作用是加在`URL`指示网页中的位置：

http://www.example.com/index.html#print

`#`本身以及它后面的字符称之为`hash`可通过`window.location.hash`属性读取.

*  `hash`虽然出现在`url`中，但不会被包括在`http`请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变`hash`不会重新加载页面。
 *  可以为`hash`的改变添加监听事件：

window.addEventListener("hashchange",funcRef,false)

*  每一次改变`hash`(`window.location.hash`)，都会在浏览器访问历史中增加一个记录。

利用`hash`的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

## `HashHistory.push()` ##

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
      this.transitionTo(location, route => {
        pushHash(route.fullPath)
        onComplete && onComplete(route)
      }, onAbort)
    }
    
    function pushHash (path) {
      window.location.hash = path
    }

`transitionTo()`方法是父类中定义的是用来处理路由变化中的基础逻辑的，`push()`方法最主要的是对`window`的`hash`进行了直接赋值：

window.location.hash=route.fullPath

`hash`的改变会自动添加到浏览器的访问历史记录中。  
那么视图的更新是怎么实现的呢，我们来看看父类`History`中的`transitionTo()`方法：

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
      const route = this.router.match(location, this.current)
      this.confirmTransition(route, () => {
        this.updateRoute(route)
        ...
      })
    }
    
    updateRoute (route: Route) {
      
      this.cb && this.cb(route)
      
    }
    
    listen (cb: Function) {
      this.cb = cb
    }

可以看到，当路由变化时，调用了`Hitory`中的`this.cb`方法，而`this.cb`方法是通过`History.listen(cb)`进行设置的，回到`VueRouter`类定义中，找到了在`init()`中对其进行了设置：

init (app: any /* Vue component instance */) {
        
      this.apps.push(app)
    
      history.listen(route => {
        this.apps.forEach((app) => {
          app._route = route
        })
      })
    }

`app`为`Vue`组件实例，但是`Vue`作为渐进式的前端框架，本身的组件定义中应该是没有有关路由内置属性`_route`,如果组件中要有这个属性，应该是在插件加载的地方，即`VueRouter`的`install()`方法中混入`Vue`对象的，`install.js`的源码：

export function install (Vue) {
      
      Vue.mixin({
        beforeCreate () {
          if (isDef(this.$options.router)) {
            this._router = this.$options.router
            this._router.init(this)
            Vue.util.defineReactive(this, '_route', this._router.history.current)
          }
          registerInstance(this, this)
        },
      })
    }

通过`Vue.mixin()`方法，全局注册一个混合，影响注册之后所有创建的每个`Vue`实例，该混合在`beforeCreate`钩子中通过`Vue.util.defineReactive()`定义了响应式的`_route`属性。所谓响应式属性，即当`_route`值改变时，会自动调用`Vue`实例的`render()`方法，更新视图。

$router.push()-->HashHistory.push()-->History.transitionTo()-->History.updateRoute()-->{app._route=route}-->vm.render()

## `HashHistory.replace()` ##

`replace()`方法与`push()`方法不同之处在于，它并不是将新路由添加到浏览器访问历史栈顶，而是替换掉当前的路由：

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
      this.transitionTo(location, route => {
        replaceHash(route.fullPath)
        onComplete && onComplete(route)
      }, onAbort)
    }
      
    function replaceHash (path) {
      const i = window.location.href.indexOf('#')
      window.location.replace(
        window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
      )
    }

可以看出，它与`push()`的实现结构基本相似，不同点它不是直接对`window.location.hash`进行赋值，而是调用`window.location.replace`方法将路由进行替换。

## 监听地址栏 ##

上面的`VueRouter.push()`和`VueRouter.replace()`是可以在`vue`组件的逻辑代码中直接调用的，除此之外在浏览器中，用户还可以直接在浏览器地址栏中输入改变路由，因此还需要监听浏览器地址栏中路由的变化 ，并具有与通过代码调用相同的响应行为，在`HashHistory`中这一功能通过`setupListeners`监听**`hashchange`**实现：

setupListeners () {
      window.addEventListener('hashchange', () => {
        if (!ensureSlash()) {
          return
        }
        this.transitionTo(getHash(), route => {
          replaceHash(route.fullPath)
        })
      })
    }

该方法设置监听了浏览器事件`hashchange`,调用的函数为`replaceHash`,即在浏览器地址栏中直接输入路由相当于代码调用了`replace()`方法。

# `HTML5History` #

`History interface`是浏览器历史记录栈提供的接口，通过`back()`,`forward()`,`go()`等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。  
从`HTML5`开始，`History interface`提供了2个新的方法：`pushState()`,`replaceState()`使得我们可以对浏览器历史记录栈进行修改：

window.history.pushState(stateObject,title,url)
    window.history,replaceState(stateObject,title,url)

*  `stateObject`:当浏览器跳转到新的状态时，将触发`popState`事件，该事件将携带这个`stateObject`参数的副本
 *  `title`:所添加记录的标题
 *  `url`:所添加记录的`url`

这`2`个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前`url`改变了，但浏览器不会立即发送请求该`url`，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础。

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 (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)
    }
    
    // src/util/push-state.js
    export function pushState (url?: string, replace?: boolean) {
      saveScrollPosition()
      // try...catch the pushState call to get around Safari
      // DOM Exception 18 where it limits to 100 pushState calls
      const history = window.history
      try {
        if (replace) {
          history.replaceState({ key: _key }, '', url)
        } else {
          _key = genKey()
          history.pushState({ key: _key }, '', url)
        }
      } catch (e) {
        window.location[replace ? 'replace' : 'assign'](url)
      }
    }
    
    export function replaceState (url?: string) {
      pushState(url, true)
    }

代码结构以及更新视图的逻辑与`hash`模式基本类似，只不过将对`window.location.hash()`直接进行赋值`window.location.replace()`改为了调用`history.pushState()`和`history.replaceState()`方法。

在`HTML5History`中添加对修改浏览器地址栏`URL`的监听**`popstate`**是直接在构造函数中执行的：

constructor (router: Router, base: ?string) {
      
      window.addEventListener('popstate', e => {
        const current = this.current
        this.transitionTo(getLocation(this.base), route => {
          if (expectScroll) {
            handleScroll(router, route, current, true)
          }
        })
      })
    }

`HTML5History`用到了`HTML5`的新特性，需要浏版本的支持，通过`supportsPushState`来检查：

src/util/push-state.js
    
    export const supportsPushState = inBrowser && (function () {
      const ua = window.navigator.userAgent
    
      if (
        (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
        ua.indexOf('Mobile Safari') !== -1 &&
        ua.indexOf('Chrome') === -1 &&
        ua.indexOf('Windows Phone') === -1
      ) {
        return false
      }
    
      return window.history && 'pushState' in window.history
    })()

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

## 两种模式比较 ##

一般的需求场景中，`hash`模式与`history`模式是差不多的，根据`MDN`的介绍，调用`history.pushState()`相比于直接修改`hash`主要有以下优势：

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

## `history`模式的问题 ##

对于单页应用来说，理想的使用场景是仅在进入应用时加载`index.html`，后续在的网络操作通过`ajax`完成，不会根据`url`重新请求页面，但是如果用户直接在地址栏中输入并回车，浏览器重启重新加载等特殊情况。

`hash`模式仅改变`hash`部分的内容，而`hash`部分是不会包含在`http`请求中的(`hash`带`#`)：

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

所以`hash`模式下遇到根据`url`请求页面不会有问题

而`history`模式则将`url`修改的就和正常请求后端的`url`一样(`history`不带`#`)

http://oursite.com/user/id

如果这种向后端发送请求的话，后端没有配置对应`/user/id`的`get`路由处理,会返回`404`错误。

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