1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function changeLocation(
  to: HistoryLocation,
  state: StateEntry,
  replace: boolean
): void {
  //
  const hashIndex = base.indexOf("#");
  // to:list -> /base/#/ui/ -> /ui/list
  const url =
    hashIndex > -1
      ? (location.host && document.querySelector("base")
          ? base
          : base.slice(hashIndex)) + to
  // http://ip:port + base + to
      : createBaseLocation() + base + to;
  try {
    // BROWSER QUIRK
    // NOTE: Safari throws a SecurityError when calling this function 100 times in 30 seconds
    history[replace ? "replaceState" : "pushState"](state, "", url);
    historyState.value = state;
  } catch (err) {
    if (__DEV__) {
      warn("Error with push/replace State", err);
    } else {
      console.error(err);
    }
    // Force the navigation, this also resets the call count
    location[replace ? "replace" : "assign"](url);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function replace(to: HistoryLocation, data?: HistoryState) {
  const state: StateEntry = assign(
    {},
    history.state,
    buildState(
      historyState.value.back,
      // keep back and forward entries but override current position
      to,
      historyState.value.forward,
      true
    ),
    data,
    // 替换操作，使用老的 position 替代新的
    // 这个会在 changeLocation 中用来计算 delta 偏移量
    { position: historyState.value.position }
  );

  // 执行 replaceState
  // 取 old historyState 然后设置 new historyState
  changeLocation(to, state, true);
  currentLocation.value = to;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function push(to: HistoryLocation, data?: HistoryState) {
  // Add to current entry the information of where we are going
  // as well as saving the current position
  const currentState = assign(
    {},
    // use current history state to gracefully handle a wrong call to
    // history.replaceState
    // https://github.com/vuejs/vue-router-next/issues/366
    historyState.value,
    history.state as Partial<StateEntry> | null,
    {
      forward: to,
      scroll: computeScrollPosition(),
    }
  );

  // ...

  // 执行 pushState, 记录 old/new historyState
  changeLocation(currentState.current, currentState, true);

  const state: StateEntry = assign(
    {},
    buildState(currentLocation.value, to, null),
    { position: currentState.position + 1 },
    data
  );

  changeLocation(to, state, false);
  currentLocation.value = to;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

const popStateHandler: PopStateListener = ({
    state,
  }: {
    state: StateEntry | null
  }) => {
    const to = createCurrentLocation(base, location)
    const from: HistoryLocation = currentLocation.value
    // 这里拿到的是跳转之前的 state
    const fromState: StateEntry = historyState.value
    let delta = 0

    if (state) {
      currentLocation.value = to
      // 这里 state 是执行路由跳转之后触发了 popstate 事件
      // 去得到的最新状态，对应 to 更新老状态值
      historyState.value = state

      // ignore the popstate and reset the pauseState
      // 暂停？忽略事件重置 pauseState ?
      if (pauseState && pauseState === from) {
        pauseState = null
        return
      }
      // 根据 to & from state 计算出要执行跳转的方向或偏移
      delta = fromState ? state.position - fromState.position : 0
    } else {
      // 没有新状态，直接替换历史记录
      replace(to)
    }

    // console.log({ deltaFromCurrent })
    // Here we could also revert the navigation by calling history.go(-delta)
    // this listener will have to be adapted to not trigger again and to wait for the url
    // to be updated before triggering the listeners. Some kind of validation function would also
    // need to be passed to the listeners so the navigation can be accepted
    // call all listeners
    listeners.forEach(listener => {
      listener(currentLocation.value, from, {
        delta,
        type: NavigationType.pop,
        direction: delta
          ? delta > 0
            ? NavigationDirection.forward
            : NavigationDirection.back
          : NavigationDirection.unknown,
      })
    })
  }

1
2
3

function pauseListeners() {
  pauseState = currentLocation.value;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 添加监听函数，返回对应的 teardown 函数
  function listen(callback: NavigationCallback) {
    // setup the listener and prepare teardown callbacks
    listeners.push(callback)

    const teardown = () => {
      const index = listeners.indexOf(callback)
      if (index > -1) listeners.splice(index, 1)
    }

    teardowns.push(teardown)
    return teardown
  }

1
2
3
4
5
6
7
8

function beforeUnloadListener() {
    const { history } = window
    if (!history.state) return
    history.replaceState(
      assign({}, history.state, { scroll: computeScrollPosition() }),
      ''
    )
  }

1
2
3
4
5
6

function destroy() {
  for (const teardown of teardowns) teardown();
  teardowns = [];
  window.removeEventListener("popstate", popStateHandler);
  window.removeEventListener("beforeunload", beforeUnloadListener);
}