小程序开发：10分钟彻底搞懂单页面应用路由

矫情吗；* 2022-11-29 11:59 184阅读 0赞

# 单页面应用特征 #

**「假设：」** 在一个 web 页面中，有1个按钮，点击可跳转到站内其他页面。

**「多页面应用：」** 点击按钮，会从新加载一个html资源，刷新整个页面；

**「单页面应用：」** 点击按钮，没有新的html请求，只发生局部刷新，能营造出一种接近原生的体验，如丝般顺滑。

SPA 单页面应用为什么可以几乎无刷新呢？因为它的SP——`single-page`。在第一次进入应用时，即返回了唯一的`html`页面和它的公共静态资源，后续的所谓“跳转”，都不再从服务端拿`html`文件，只是`DOM`的替换操作，是模（jia）拟（zhuang）的。

那么js又是怎么捕捉到组件切换的时机，并且无刷新变更浏览器url呢？靠`hash`和`HTML5History`。

# hash 路由 #

## 特征 ##

1.  类似`www.xiaoming.html#bar` 就是哈希路由，当 `#` 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 `hashchange` 事件来监听到 URL 的变化，从而进行`DOM`操作来模拟页面跳转
2.  不需要服务端配合
3.  对 SEO 不友好

## 原理 ##

[![format_png][]][format_png 1]

hash

# HTML5History 路由 #

## 特征 ##

1.  `History` 模式是 HTML5 新推出的功能，比之 hash 路由的方式直观，长成类似这个样子`www.xiaoming.html/bar` ，模拟页面跳转是通过 `history.pushState(state, title, url)` 来更新浏览器路由，路由变化时监听 `popstate` 事件来操作`DOM`
2.  需要后端配合，进行重定向
3.  对 SEO 相对友好

## 原理 ##

![HTML5History][]

HTML5History

# vue-router 源码解读 #

以 `Vue` 的路由`vue-router`为例，我们一起来撸一把它的源码。

Tips：因为，本篇的重点在于讲解单页面路由的两种模式，所以，下面只列举了一些关键代码，主要讲解：

1.  注册插件
2.  VueRouter的构造函数，区分路由模式
3.  全局注册组件
4.  hash / HTML5History模式的 push 和监听方法
5.  transitionTo 方法

## 注册插件 ##

首先，作为一个插件，要有暴露一个`install`方法的自觉，给`Vue`爸爸去 `use`。

源码的`install.js`文件中，定义了注册安装插件的方法`install`，给每个组件的钩子函数混入方法，并在`beforeCreate`钩子执行时初始化路由：

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)
      },
      // 全文中以...来表示省略的方法
      ...
    });
    复制代码

## 区分mode ##

然后，我们从`index.js`找到整个插件的基类 `VueRouter`，不难看出，它是在`constructor`中，根据不同`mode` 采用不同路由实例的。

...
    import {install} from './install';
    import {HashHistory} from './history/hash';
    import {HTML5History} from './history/html5';
    ...
    export default class VueRouter {
      static install: () => void;
      constructor (options: RouterOptions = {}) {
        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}`)
          }
        }
      }
    }
    复制代码

## 全局注册router-link组件 ##

这个时候，我们也许会问：使用 vue-router 时， 常见的`<router-link/>`、 `<router-view/>`又是在哪里引入的呢？

回到`install.js`文件，它引入并全局注册了 router-view、router-link组件：

import View from './components/view';
    import Link from './components/link';
    ...
    Vue.component('RouterView', View);
    Vue.component('RouterLink', Link);
    复制代码

在 `./components/link.js` 中，`<router-link/>`组件上默认绑定了`click`事件，点击触发`handler`方法进行相应的路由操作。

const handler = e => {
      if (guardEvent(e)) {
        if (this.replace) {
          router.replace(location, noop)
        } else {
          router.push(location, noop)
        }
     }
    };
    复制代码

就像最开始提到的，`VueRouter`构造函数中对不同`mode`初始化了不同模式的 History 实例，因而`router.replace、router.push`的方式也不尽相同。接下来，我们分别扒拉下这两个模式的源码。

## hash模式 ##

history/hash.js 文件中，定义了`HashHistory` 类，这货继承自 history/base.js 的 `History` 基类。

它的`prototype`上定义了`push`方法：在支持 HTML5History 模式的浏览器环境中（`supportsPushState`为 true），调用`history.pushState`来改变浏览器地址；其他浏览器环境中，则会直接用`location.hash = path` 来替换成新的 hash 地址。

其实，最开始读到这里是有些疑问的，既然已经是 hash 模式为何还要判断`supportsPushState`？原来，是为了支持[`scrollBehavior`][scrollBehavior]，`history.pushState`可以传参key过去，这样每个url历史都有一个key，用 key 保存了每个路由的位置信息。

同时，原型上绑定的`setupListeners` 方法，负责监听 hash 变更的时机：在支持 HTML5History 模式的浏览器环境中，监听`popstate`事件；而其他浏览器中，则监听`hashchange`。监听到变化后，触发`handleRoutingEvent` 方法，调用父类的`transitionTo`跳转逻辑，进行 DOM 的替换操作。

import { pushState, replaceState, supportsPushState } from '../util/push-state'
    ...
    export class HashHistory extends History {
      setupListeners () {
        ...
        const handleRoutingEvent = () => {
            const current = this.current
            if (!ensureSlash()) {
              return
            }
            // transitionTo调用的父类History下的跳转方法，跳转后路径会进行hash化
            this.transitionTo(getHash(), route => {
              if (supportsScroll) {
                handleScroll(this.router, route, current, true)
              }
              if (!supportsPushState) {
                replaceHash(route.fullPath)
              }
            })
          }
          const eventType = supportsPushState ? 'popstate' : 'hashchange'
          window.addEventListener(
            eventType,
            handleRoutingEvent
          )
          this.listeners.push(() => {
            window.removeEventListener(eventType, handleRoutingEvent)
          })
      }
      
      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
        )
      }
    }
    ...
    
    // 处理传入path成hash形式的URL
    function getUrl (path) {
      const href = window.location.href
      const i = href.indexOf('#')
      const base = i >= 0 ? href.slice(0, i) : href
      return `${base}#${path}`
    }
    ...
    
    // 替换hash
    function pushHash (path) {
      if (supportsPushState) {
        pushState(getUrl(path))
      } else {
        window.location.hash = path
      }
    }
    
    // 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 && typeof window.history.pushState === 'function'
      })()
    复制代码

## HTML5History模式 ##

类似的，`HTML5History` 类定义在 history/html5.js 中。

定义`push`原型方法，调用`history.pusheState`修改浏览器的路径。

与此同时，原型`setupListeners` 方法对`popstate`进行了事件监听，适时做 DOM 替换。

import {pushState, replaceState, supportsPushState} from '../util/push-state';
    ...
    export class HTML5History extends History {
    
      setupListeners () {
    
        const handleRoutingEvent = () => {
        const current = this.current;
        const location = getLocation(this.base);
        if (this.current === START && location === this._startLocation) {
          return
        }
    
        this.transitionTo(location, route => {
          if (supportsScroll) {
            handleScroll(router, route, current, true)
          }
        })
        }
        window.addEventListener('popstate', handleRoutingEvent)
        this.listeners.push(() => {
          window.removeEventListener('popstate', handleRoutingEvent)
        })
      }
      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)
      }
    }
    
    ...
    
    // util/push-state.js文件中的方法
    export function pushState (url?: string, replace?: boolean) {
      saveScrollPosition()
      const history = window.history
      try {
        if (replace) {
          const stateCopy = extend({}, history.state)
          stateCopy.key = getStateKey()
          history.replaceState(stateCopy, '', url)
        } else {
          history.pushState({ key: setStateKey(genStateKey()) }, '', url)
        }
      } catch (e) {
        window.location[replace ? 'replace' : 'assign'](url)
      }
    }
    复制代码

## transitionTo 处理路由变更逻辑 ##

上面提到的两种路由模式，都在监听时触发了`this.transitionTo`，这到底是个啥呢？它其实是定义在 history/base.js 基类上的原型方法，用来处理路由的变更逻辑。 先通过`const route = this.router.match(location, this.current)`对传入的值与当前值进行对比，返回相应的路由对象；接着判断新路由是否与当前路由相同，相同的话直接返回；不相同，则在`this.confirmTransition`中执行回调更新路由对象，并对视图相关DOM进行替换操作。

export class History {
     ...
     transitionTo (
        location: RawLocation,
        onComplete?: Function,
        onAbort?: Function
      ) {
        const route = this.router.match(location, this.current)
        this.confirmTransition(
          route,
          () => {
            const prev = this.current
            this.updateRoute(route)
            onComplete && onComplete(route)
            this.ensureURL()
            this.router.afterHooks.forEach(hook => {
              hook && hook(route, prev)
            })
    
            if (!this.ready) {
              this.ready = true
              this.readyCbs.forEach(cb => {
                cb(route)
              })
            }
          },
          err => {
            if (onAbort) {
              onAbort(err)
            }
            if (err && !this.ready) {
              this.ready = true
              // https://github.com/vuejs/vue-router/issues/3225
              if (!isRouterError(err, NavigationFailureType.redirected)) {
                this.readyErrorCbs.forEach(cb => {
                  cb(err)
                })
              } else {
                this.readyCbs.forEach(cb => {
                  cb(route)
                })
              }
            }
          }
        )
      }
      ...
    }
    复制代码

# 最后 #

好啦，以上就是单页面路由的一些小知识，希望我们能一起从入门到永不放弃~~

作者：百度智能[小程序][Link 1]技术  
来源：掘金

[format_png]: /images/20221124/96306ce9dff340c38bb38b4e1521fc13.png
[format_png 1]: http://www.wxapp-union.com/data/attachment/portal/202008/20/112553piymo0vtmtkkyk0o.png
[HTML5History]: /images/20221124/7bba0bbfe43e460f901739fc850f050e.png
[scrollBehavior]: https://github.com/vuejs/vue-router/commit/1422eb51584139d210a2065d1d384e36cd73b9de
[Link 1]: http://www.wxapp-union.com/