详解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)
  }
 })