vue-router源码分析（二）--HTML5History

我就是我 2022-03-18 14:00 153阅读 0赞

首先： HTML5History也继承自History

var HTML5History = (function(History$$1){...})(History)

function getLocation (base) { //处理url
      var path = decodeURI(window.location.pathname);
      if (base && path.indexOf(base) === 0) {
        path = path.slice(base.length);
      }
      return (path || '/') + window.location.search + window.location.hash
    }

HTML5History构造方法,window监听popstate来触发组件切换和历史记录更新

function HTML5History (router, base) {
        var this$1 = this;
    
        History$$1.call(this, router, base); //执行History构造方法，继承实例方法
        //滚动处理
        var expectScroll = router.options.scrollBehavior;
        var supportsScroll = supportsPushState && expectScroll;
    
        if (supportsScroll) {
          setupScroll();
        }
        //获取初始url
        var initLocation = getLocation(this.base);
        //给window添加popstate事件监听
        window.addEventListener('popstate', function (e) {
          var current = this$1.current;
          
          // Avoiding first `popstate` event dispatched in some browsers but first
          // history route not updated since async guard at the same time.
          var location = getLocation(this$1.base);
          if (this$1.current === START && location === initLocation) {
            return
          }
            //调用transitionTo方法，完成跳转
          this$1.transitionTo(location, function (route) {
            if (supportsScroll) {
              handleScroll(router, route, current, true);
            }
          });
        });
      }

原型方法：

1. HTML5History.prototype.go  调用window.history.go()方法

2. HTML5History.prototype.push  调用实例方法transitionTo，回调中执行pushState

var ref = this;
        var fromRoute = ref.current;
        this.transitionTo(location, function (route) {
          pushState(cleanPath(this$1.base + route.fullPath));
          handleScroll(this$1.router, route, fromRoute, false);
          onComplete && onComplete(route);
        }, onAbort);

3. HTML5History.prototype.replace 同上。调用实例方法transitionTo，回调中执行replaceState

4.HTML5History.prototype.ensureURL

//如果要跳转的地址跟当前地址不同
    if (getLocation(this.base) !== this.current.fullPath) {
          var current = cleanPath(this.base + this.current.fullPath);
        //根据传入的push参数来决定是push还是replace新地址
          push ? pushState(current) : replaceState(current);
        }

**pushState， replaceState**

function pushState (url, replace) {
      saveScrollPosition();
      // try...catch the pushState call to get around Safari
      // DOM Exception 18 where it limits to 100 pushState calls
      var 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);
      }
    }
    
    function replaceState (url) {
      pushState(url, true);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter源码（三）--RouterView， RouterLink

注册为vue组件 RouterView 和RouterLink组件在install方法中注册成了Vue的组件 function install (Vue) ...

分手后的思念是犯贱/ 2024年04月18日 20:03/ 0 赞/ 66 阅读

相关 HTML5 history详解

近研究vue-router单页转跳而不向服务器请求的原理，主要是HTML5 history以及hash的应用，支持history时使用history模式下面详细学...

刺骨的言语ヽ痛彻心扉/ 2024年04月18日 12:59/ 0 赞/ 56 阅读

相关 openMPM源码分析（二）

test/sync\_test/src/c66x/main.c 接着昨天的main.c后面的内容。 1. 函数 int32\_t sync\_test\_shmem\_c

红太狼/ 2022年08月06日 12:03/ 0 赞/ 246 阅读

相关 Spring5源码分析（二） IOC 容器的初始化（二）

承接上一篇文章继续分析FileSystemXmlApplicationContextIOC容器创建的流程。 2.5 AbstractBeanDefinitionRead

末蓝、/ 2022年05月24日 08:25/ 0 赞/ 208 阅读

相关 HTML5——history实现单页面

1. 单页Web应用（single page web application，SPA） history.back()：URL回退一次 history.forward()：U

偏执的太偏执、/ 2022年05月11日 01:52/ 0 赞/ 193 阅读

相关 ARouter源码分析（二）—— 拦截器源码分析

> `Arouter`源码分析系列文章，请访问[https://github.com/AlexMahao/ARouter][https_github.com_AlexMahao

痛定思痛。/ 2022年04月24日 13:06/ 0 赞/ 331 阅读

相关 vue-router源码分析（二）--HTML5History

首先： HTML5History也继承自History var HTML5History = (function(History$$1){...})(History)

我就是我/ 2022年03月18日 14:00/ 0 赞/ 154 阅读

相关 vue-router源码浅显分析（一）--Vue.use(VueRouter), new VueRouter(options)，HashHistory

1，vue中使用vueRouter需要通过vue.use(vueRouter)，众所周知，这里实际上调用了VueRouter的install方法，对Vue进行了扩展，vueR

朴灿烈づ我的快乐病毒、/ 2022年03月18日 08:44/ 0 赞/ 345 阅读

相关 Spring5 源码分析

1 、什么是 IOC/DI ？ IOC(Inversion of Control)控制反转：所谓控制反转，就是把原先我们代码里面需要实现的对象创建、依赖的代码，反转

矫情吗；*/ 2022年03月02日 01:13/ 0 赞/ 279 阅读

相关 html5风扇源码

夏天太热，需要风扇，来一段Html5风扇源码； ![在这里插入图片描述][20200715092544724.gif] <!DOCTYPE html>

古城微笑少年丶/ 2021年07月16日 19:35/ 0 赞/ 465 阅读