详解Vue-Router源码分析路由实现原理

import Vue from 'vue'
import VueRouter from 'vue-router'
//注册插件 如果是在浏览器环境运行的，可以不写该方法
Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const User = { template: '<div>用户</div>' }
const Role = { template: '<div>角色</div>' }

// 2. 定义路由
// Array,每个路由应该映射一个组件。
const routes = [
 { path: '/user', component: User },
 { path: '/home', component: Home }
]

// 3. 创建 router 实例，并传 `routes` 配置
const router = new VueRouter({
 routes 
})

// 4. 创建和挂载根实例。
// 记得要通过 router 对象以参数注入Vue，
// 从而让整个应用都有路由功能
// 使用 router-link 组件来导航.
// 路由出口
// 路由匹配到的组件将渲染在这里
const app = new Vue({
 router,
 template: `
  <div id="app">
   <h1>Basic</h1>
   <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/user">用户</router-link></li>
    <li><router-link to="/role">角色</router-link></li>
    <router-link tag="li" to="/user">/用户</router-link>
   </ul>
   <router-view class="view"></router-view>
  </div>
 `
}).$mount('#app')

if (inBrowser && window.Vue) {
 window.Vue.use(VueRouter)
}

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

 _Vue = Vue

 const isDef = v => v !== undefined

 const registerInstance = (vm, callVal) => {
  let i = vm.$options._parentVnode
  if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
   i(vm, callVal)
  }
 }

 Vue.mixin({
  //对Vue实例混入beforeCreate钩子操作
  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 () {
   registerInstance(this)
  }
 })
 //通过Vue.prototype定义$router、$route 属性（方便所有组件可以获取这两个属性）
 Object.defineProperty(Vue.prototype, '$router', {
  get () { return this._routerRoot._router }
 })

 Object.defineProperty(Vue.prototype, '$route', {
  get () { return this._routerRoot._route }
 })
 //Vue上注册router-link和router-view两个组件
 Vue.component('RouterView', View)
 Vue.component('RouterLink', Link)

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

const router = new VueRouter({
 routes 
})

const app = new Vue({
 router,
 template: `
  <div id="app">
   <h1>Basic</h1>
   <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/user">用户</router-link></li>
    <li><router-link to="/role">角色</router-link></li>
    <router-link tag="li" to="/user">/用户</router-link>
   </ul>
   <router-view class="view"></router-view>
  </div>
 `
}).$mount('#app')

Vue.mixin({
  beforeCreate () {
   //验证vue是否有router对象了，如果有，就不再初始化了
   if (isDef(this.$options.router)) { //没有router对象
    //将_routerRoot指向根组件
    this._routerRoot = this
    //将router对象挂载到根组件元素_router上
    this._router = this.$options.router
    //初始化，建立路由监控
    this._router.init(this)
    //劫持数据_route，一旦_route数据发生变化后，通知router-view执行render方法
    Vue.util.defineReactive(this, '_route', this._router.history.current)
   } else {
    //如果有router对象，去寻找根组件，将_routerRoot执行根组件（解决嵌套关系时候_routerRoot指向不一致问题）
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
   }
   registerInstance(this, this)
  },
  destroyed () {
   registerInstance(this)
  }
 })