前端入门之(vue-router全解析二)_router.history.current-优快云博客

本文详细介绍了Vue Router的初始化过程、路由配置、组件渲染原理，包括install方法的作用、beforeCreate和destroyed生命周期钩子、$router和$route的使用，以及router-view和router-link组件的工作方式。通过分析源码，阐述了路由切换时组件如何重新渲染，同时也提到了导航守卫和HTML5 History模式下的push方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面一篇文章前端入门之(vue-router全解析一)我们简单的了解了一下vue-router的原理,今天我们继续vue-router,我们从头到尾的全部撸一遍哈.小伙伴开车啦,跟紧了哦~~

我这里以vue-cli+webpack创建的但页面工程为例子了哈,我们直接选带有vue-router的模版代码为demo.

先上一下vue-router的官网:
https://router.vuejs.org/zh/guide/#javascript

在创建好的vue工程中,我们可以看到我们的main.js文件:


import router from './router'
....
new Vue({
  el: '#app',
  router,
  store,
  render(h){
    return h(App)
  }
})

然后是我们的router.js文件:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode:'hash',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

然后在App.vue中配置router-view:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

就这么简单的几个操作,我们的vue-router就可以跑起来了,好啦! 我们转过头来一步一步的研究vue-router是怎么走起来的.

首先我们看我们的router.js文件:

Vue.use(Router)

export default new Router({
...
 )}

我们看一下Vue.use(Router)干了什么~~

我们翻开vue-router的源码,找到install方法:

function install (Vue) {
  if (install.installed && _Vue === Vue) { return }
  install.installed = true;

  _Vue = Vue;

  var isDef = function (v) { return v !== undefined; };
  
  var registerInstance = function (vm, callVal) {
    var i = vm.$options._parentVnode;
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal);
    }
  };

  Vue.mixin({
    beforeCreate: function beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this;
        this._router = this.$options.router;
        this._router.init(this);
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this;
      }
      registerInstance(this, this);
    },
    destroyed: function destroyed () {
      registerInstance(this);
    }
  });

  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('router-view', View);
  Vue.component('router-link', Link);

  var strats = Vue.config.optionMergeStrategies;
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created;
}

我们看到这么一段代码:

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