詳解Vue-Router源碼分析路由實現(xiàn)原理

import Vue from 'vue'
import VueRouter from 'vue-router'
//注冊插件 如果是在瀏覽器環(huán)境運行的，可以不寫該方法
Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const User = { template: '<div>用戶</div>' }
const Role = { template: '<div>角色</div>' }

// 2. 定義路由
// Array,每個路由應(yīng)該映射一個組件。
const routes = [
 { path: '/user', component: User },
 { path: '/home', component: Home }
]

// 3. 創(chuàng)建 router 實例，并傳 `routes` 配置
const router = new VueRouter({
 routes 
})

// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 對象以參數(shù)注入Vue，
// 從而讓整個應(yīng)用都有路由功能
// 使用 router-link 組件來導(dǎo)航.
// 路由出口
// 路由匹配到的組件將渲染在這里
const app = new Vue({
 router,
 template: `
  <div id="app">
   <h2>Basic</h2>
   <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">
   <h2>Basic</h2>
   <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
    //初始化，建立路由監(jiān)控
    this._router.init(this)
    //劫持數(shù)據(jù)_route，一旦_route數(shù)據(jù)發(fā)生變化后，通知router-view執(zhí)行render方法
    Vue.util.defineReactive(this, '_route', this._router.history.current)
   } else {
    //如果有router對象，去尋找根組件，將_routerRoot執(zhí)行根組件（解決嵌套關(guān)系時候_routerRoot指向不一致問題）
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
   }
   registerInstance(this, this)
  },
  destroyed () {
   registerInstance(this)
  }
 })