vue-router3 源码注释系列 /src/util/scroll.js

/* @flow */

import type Router from '../index'
import {
   
    assert } from './warn'
//getStateKey： 用于获取时间戳key; 
//setStateKey： 用于设置时间戳key;
import {
   
    getStateKey, setStateKey } from './state-key'
//浅拷贝对象的属性。
import {
   
    extend } from './misc'

//用于保存对应的页面的 scrollposition 位置。
const positionStore = Object.create(null)

export function setupScroll() {
   
   
  /*
    history.scrollRestoration。它提供两个值，auto，作为它的默认值，可以像你所见的大多数情况一样工作，
    另一个manual，意味着作为一个开发者你拥有了自主掌控任何所需的scroll改变，当用户循环往复于app的history中。
    如果需要，你可以跟踪scroll的位置轨迹，当你使用history.pushState(),push history的时候。
  */
 //用于组织浏览器在 history popstate 事件中自动滚动窗口。
  // Prevent browser scroll behavior on History popstate
  if ('scrollRestoration' in window.history) {
   
   
    window.history.scrollRestoration = 'manual'
  }
  // Fix for #1585 for Firefox
  // Fix for #2195 Add optional third attribute to workaround a bug in safari https://bugs.webkit.org/show_bug.cgi?id=182678
  // Fix for #2774 Support for apps loaded from Windows file shares not mapped to network drives: replaced location.origin with
  // window.location.protocol + '//' + window.location.host
  // location.host contains the port and location.hostname doesn't

  //浏览器地址为： http://192.168.10.73:10095/message/inforList
  //protocolAndPath: "http://192.168.10.73:10095"
  const protocolAndPath = window.location.protocol + '//' + window.location.host
  //absolutePath: message/inforList
  const absolutePath = window.location.href.replace(protocolAndPath, '')
  // preserve existing history state as it could be overriden by the user
  // stateCopy: {
   
   
  //  key: "777.900"
  // }
  const stateCopy = extend({
   
   }, window.history.state)
  //替换掉 stateCopy 的 key 的值。
  stateCopy.key = getStateKey()
  //repalce 方式跳转到 absolutePath 路径。
  window.history.replaceState(stateCopy, '', absolutePath)
  //开始监听 history 的 popstate 事件。
  window.addEventListener('popstate', handlePopState)
  return () => {
   
   
    //移除对 history 的 popstate 事件的监听。
    window.removeEventListener('popstate', handlePopState)
  }
}

/*
  handleScroll() 函数
  router: 路由对象。
  to:     前往的路由
  from:   上一个路由