【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析

MAXLZ

已于 2022-06-19 13:59:40 修改

阅读量1.9w

点赞数 20

分类专栏：【vue-router源码】文章标签： vue.js typescript vue-router

于 2022-06-05 22:37:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33635385/article/details/125120460

版权

【vue-rouer源码】系列文章

前言

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该系列文章源码参考vue-router v4.0.15。
源码地址：https://github.com/vuejs/router
阅读该文章的前提是你最好了解vue-router的基本使用，如果你没有使用过的话，可通过vue-router官网学习下。

在vue-router 4.x中创建router时，需要使用createWebHistory、createWebHashHistory、createMemoryHistory中的一个创建一个history，这篇文章将就这三个函数进行解析。

使用

import {
    createWebHistory, createRouter } from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
   
	history: routerHistory,
	routes: [ ... ]
})

createWebHistory

createWebHistory源码所处位置：src/history/html5.ts。
首先来看createWebHistory的参数，函数可以接受一个base字符串可选参数，该参数提供了一个基础路径。
在createWebHistory中首先会调用normalizeBase函数对传入的base进行标准化。

base = normalizeBase(base)

来看下base标准化的过程：

export function normalizeBase(base?: string): string {
   
  if (!base) {
   
  	// 浏览其环境下尝试获取base标签的href属性
    if (isBrowser) {
   
      const baseEl = document.querySelector('base')
      base = (baseEl && baseEl.getAttribute('href')) || '/'
      // 去除htttp(s)://xxx/，如https://example.com/folder/ --> /folder/
      base = base.replace(/^\w+:\/\/[^\/]+/, '')
    } else {
   
      base = '/'
    }
  }
  // 确保base的前导/
  if (base[0] !== '/' && base[0] !== '#') base = '/' + base

  return removeTrailingSlash(base)
}

如果没有配置base的话，在浏览器环境下会尝试获取<base>标签的href属性作为base，如果没有<base>标签或<base>标签的href属性没有值，base取/，然后又对base进行了reaplce(/^\w+:\/\/[^\/]+/, '')操作，该操作是去除base的http(s)://xxx部分（如果base是https://example.com/floder/child，base最终会变成/floder/child）；非浏览器环境下，base直接取/。在最后会将base的末尾/去除，然后返回base，这样做的目的是后续我们可以通过base + fullPath的形式建立一个href。

base标准化后，会声明一个historyNavigation和historyListeners变量：

const historyNavigation = useHistoryStateNavigation(base)
const historyListeners = useHistoryListeners(
  base,
  historyNavigation.state,
  historyNavigation.location,
  historyNavigation.replace
)

这两个变量是什么呢？接下来看下useHistoryStateNavigation()、useHistoryListeners()的实现。

先看useHistoryStateNavigation:

function useHistoryStateNavigation(base: string) {
   
  // 获取window.history、window.location
  const {
    history, location } = window

  const currentLocation: ValueContainer<HistoryLocation> = {
   
    value: createCurrentLocation(base, location),
  }
  const historyState: ValueContainer<StateEntry> = {
    value:  }
  // 如果history.state是空的，构建一条新的历史记录
  if (!historyState.value) {
   
    changeLocation(
      currentLocation.value,
      {
   
        back: null,
        current: currentLocation.value,
        forward: null,
        position: history.length - 1,
        replaced: true,
        scroll: null,
      },
      true
    )
  }
  // 修改历史记录
  function changeLocation(
    to: HistoryLocation,
    state: StateEntry,
    replace: boolean
  ): void {
   
    const hashIndex = base.indexOf('#')
    // 获取url，作为history.replaceState/pushState的参数
    // 如果hashIndex > -1，url = `{location.host && document.querySelector('base') ? base : base字符串#及后面字符}${to}`
    // 否则 url = `${location.protocol}//${location.host}${base}${to}`
    co