vue-router 工作原理

其他 2020-04-12 13:50:53 阅读次数: 0

简述

hashchange
-->
match route
-->
set vm._route
-->
<router-view> render()
-->
render matched component

监听hashchange方法

window.addEventListener('hashchange', () => {
    // this.transitionTo(...)
})

进行地址匹配，得到对应当前地址的 route。

将其设置到对应的 vm._route 上。侵入vue监听_route变量而触发更新流程

最后是router-view组件调用render函数渲染匹配到的route

测试代码

<!DOCTYPE html>
<html>
<head>
  <title>vue test</title>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <button @click="goBack">click me and go back</button>
  <button @click="goIndex">click me and go to index</button>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
  </p>
  <p>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  
  <router-view></router-view>
</div>

  <!-- Vue.js v2.6.11 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  <script>
    const Foo = { template: '<div>render foo</div>' }
    const Bar = { template: '<div>render bar</div>' }
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })

    var app = new Vue({
      el: '#app',
      router,
      methods: {
        goBack() {
          this.$router.back();
        },
        goIndex() {
          this.$router.push('/');
        }
      }
    })

    console.log(app);
    // var event = new CustomEvent('test', { 'detail': 5 }); window.dispatchEvent(event);
  </script>
</body>
</html>

怎么注入进的 vue

一个 install 函数，把 $route 挂载到了 Vue.prototype 上，保证 Vue 的所有组件实例，都是取同一份 router。并且在里面注册了 RouterView 和 RouterLink 组件

function install(Vue) {
  // ...

  Vue.mixin({
    beforeCreate: function beforeCreate() {
      // ...
      
      this._routerRoot = this;
      this._router = this.$options.router;
      this._router.init(this);
      Vue.util.defineReactive(this, '_route', this._router.history.current);

      // ...
    },
    destroyed: function destroyed() {
      // ...
    }
  });

  Object.defineProperty(Vue.prototype, '$router', {
    get: function get() { return this._routerRoot._router }
  });

  Object.defineProperty(Vue.prototype, '$route', {
    get: function get() { return this._routerRoot._route }
  });

  Vue.component('RouterView', View);
  Vue.component('RouterLink', Link);

  // ...
}

VueRouter.install = install;

最后进入了 vue 的初始化逻辑里 initUse 函数里去触发插件的 install 函数执行。

router 是个什么结构

详见 function VueRouter (options)，下面代码中需要注意三点：

  • app 将会挂上 vue 实例对象
  • mode 代表用户配置的路由模式，默认是 hash，也就是使用 url 上的 hash 部分作为路由路径的判定。
  • history 将会挂载上用户曾经的访问的记录数组。
var VueRouter = function VueRouter (options) {
  this.app = null;
  this.apps = [];
  this.options = options;
  this.beforeHooks = [];
  this.resolveHooks = [];
  this.afterHooks = [];
  this.matcher = createMatcher(options.routes || [], this);

  var mode = options.mode || 'hash';
  // ...
  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:
      {
        assert(false, ("invalid mode: " + mode));
      }
  }
};

RouterView 组件长什么样

看下文代码，总结一下关键的步骤：

最关键的一步 var component = cache[name] = matched.components[name]; 获取到具体是那个组件，这里的 component 其实是

{
  template: "<div>render bar</div>"
  _Ctor: {0: ƒ}
  __proto__: Object
}

然后最后面就是调用 h(component, data, children) 完成渲染，h其实是 Vue 实例的 $createElement 函数，它会具体解析此 template 成为视图渲染。

var View = {
    name: 'RouterView',
    functional: true,
    props: {
      name: {
        type: String,
        default: 'default'
      }
    },
    render: function render (_, ref) {
      var props = ref.props;
      var children = ref.children;
      var parent = ref.parent;
      var data = ref.data;

      // used by devtools to display a router-view badge
      data.routerView = true;

      // directly use parent context's createElement() function
      // so that components rendered by router-view can resolve named slots
      var h = parent.$createElement;
      var name = props.name;
      var route = parent.$route;
      var cache = parent._routerViewCache || (parent._routerViewCache = {});

      // ...

      var component = cache[name] = matched.components[name];

      // ...

      return h(component, data, children)
    }
  };

很精妙，此组件的 props 默认把 tag 设置为 a，并且代码中还支持 slotScope 插槽。

最后一样 h(this.tag, data, this.$slots.default) 去渲染，所以此组件渲染后的标签才会默认是 a 标签呀。。

var Link = {
  name: 'RouterLink',
  props: {
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
    exact: Boolean,
    append: Boolean,
    replace: Boolean,
    activeClass: String,
    exactActiveClass: String,
    event: {
      type: eventTypes,
      default: 'click'
    }
  },
  render: function render(h) {

    var router = this.$router;
    var current = this.$route;
    var ref = router.resolve(
      this.to,
      current,
      this.append
    );
    // ...
    var href = ref.href;

    // ...

    var data = { class: classes };

    var scopedSlot =
      !this.$scopedSlots.$hasNormal &&
      this.$scopedSlots.default
    // ...

    if (scopedSlot) {
      if (scopedSlot.length === 1) {
        return scopedSlot[0]
      } else if (scopedSlot.length > 1 || !scopedSlot.length) {
        // ...
        return scopedSlot.length === 0 ? h() : h('span', {}, scopedSlot)
      }
    }

    if (this.tag === 'a') {
      data.on = on;
      data.attrs = { href: href };
    } else {
      // ...
    }

    return h(this.tag, data, this.$slots.default)
  }
};

路由控制是怎么做的

本质上就是改变了 hash

hashchange 的事件监听触发，接着去触发 HashHistory 实例里的 updateRoute 函数，updateRoute 函数里触发回调去更新 route 对象，route 对象更新就走入了 vue 自身的 set 触发广播通知被观察者了。

VueRouter.prototype.back = function back () {
    this.go(-1);
  };
  
VueRouter.prototype.go = function go (n) {
    this.history.go(n);
  };

HashHistory.prototype.go = function go (n) {
  window.history.go(n);
};

// ...

window.addEventListener(
  supportsPushState ? 'popstate' : 'hashchange',
  function () {
    var current = this$1.current;
    // ...
    this$1.transitionTo(getHash(), function (route) {
      if (supportsScroll) {
        handleScroll(this$1.router, route, current, true);
      }
      if (!supportsPushState) {
        replaceHash(route.fullPath);
      }
    });
  }
);

// ...

History.prototype.transitionTo = function transitionTo(
  location,
  onComplete,
  onAbort
) {
  var this$1 = this;

  var route = this.router.match(location, this.current);
  this.confirmTransition(
    route,
    function () {
      this$1.updateRoute(route);
      // ...
    },
    function (err) {
      // ...
    }
  );
};

// ...

History.prototype.updateRoute = function updateRoute(route) {
  var prev = this.current;
  this.current = route;
  // 这里的 cb 就是下面一段的 history.listen
  this.cb && this.cb(route);
  this.router.afterHooks.forEach(function (hook) {
    hook && hook(route, prev);
  });
};

// ...

history.listen(function (route) {
  this$1.apps.forEach(function (app) {
    // 改变 app._route 就会进入 vue 实例自身的 get/set 拦截器中，然后自己触发更新。
    // 因为上文 install 函数里做了属性劫持 Vue.util.defineReactive(this, '_route', this._router.history.current);
    app._route = route;
  });
});

钩子是怎么做的

this.beforeHooks 是个数组，registerHook 函数做的就只是往前面的数组里添加进入这个方法。

VueRouter.prototype.beforeEach = function beforeEach(fn) {
  return registerHook(this.beforeHooks, fn)
};

VueRouter.prototype.beforeResolve = function beforeResolve(fn) {
  return registerHook(this.resolveHooks, fn)
};

VueRouter.prototype.afterEach = function afterEach(fn) {
  return registerHook(this.afterHooks, fn)
};

beforeHooks 在每次触发更新前的队列里调用

resolveHooks 执行是在下文的 runQueue 里，也就是是在触发更新前，但比 beforeHooks 晚，主要用于异步组件

afterHooks 的触发，是在 updateRoute 函数后，也就是开始触发 vue 的更新逻辑时，但并不一定视图已经更新完毕，因为 vue 自身也有不少的队列操作，不会立即更新。

// beforeHooks
var queue = [].concat(
  // in-component leave guards
  extractLeaveGuards(deactivated),
  // global before hooks
  this.router.beforeHooks,
  // in-component update hooks
  extractUpdateHooks(updated),
  // in-config enter guards
  activated.map(function (m) { return m.beforeEnter; }),
  // async components
  resolveAsyncComponents(activated)
);

runQueue(queue, iterator, function () {
  // ...
}
    
// resolveHooks
runQueue(queue, iterator, function () {
  // ...

  // wait until async components are resolved before
  // extracting in-component enter guards
  var enterGuards = extractEnterGuards(activated, postEnterCbs, isValid);
  var queue = enterGuards.concat(this$1.router.resolveHooks);
  runQueue(queue, iterator, function () {
    //...
    onComplete(route);
    //...
  });
});

// afterHooks
History.prototype.updateRoute = function updateRoute(route) {
  var prev = this.current;
  this.current = route;
  this.cb && this.cb(route);
  this.router.afterHooks.forEach(function (hook) {
    hook && hook(route, prev);
  });
};

history 是怎么做的

hash 模式的路由是采用的 hash change 函数来做监听，并且操作浏览器 hash 做标识，

而 history 模式采用的 popstate event 来记住路由的状态，而 window.history.state 里的 key 只是用时间来生成的一个缓存。

HTML5History.prototype.push = function push (location, onComplete, onAbort) {
  var this$1 = this;

  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);
};

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: getStateKey() }, '', url);
    } else {
      history.pushState({ key: setStateKey(genStateKey()) }, '', url);
    }
  } catch (e) {
    window.location[replace ? 'replace' : 'assign'](url);
  }
}

function genStateKey () {
  return Time.now().toFixed(3)
}

猜你喜欢

转载自www.cnblogs.com/everlose/p/12608978.html
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022