淺析vue-router原理

//main.js文件中
const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

export const routes = [ 
 {path: "/", name: "homeLink", component:Home}
 {path: "/register", name: "registerLink", component: Register},
 {path: "/login", name: "loginLink", component: Login},
 {path: "*", redirect: "/"}] 

let router = new VueRouter({routes:[{path:'/home',component:Home}]});

<router-view></router-view>

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主體
import App from './components/app.vue';
import index from './components/index.vue'
//安裝插件
Vue.use(VueRouter); //掛載屬性
//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
  routes: [
    //一個個對象
    { path: '/index', component: index }
  ]
});
//new Vue 啟動
new Vue({
  el: '#app',
  //讓vue知道我們的路由規(guī)則
  router: router, //可以簡寫router
  render: c => c(App),
})

//app.vue中
<template>
  <div>
    <!-- 留坑，非常重要 -->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {}
    }
  }
</script>

export default class VueRouter {
 static install: () => void;
 static version: string;
 app: any;
 apps: Array<any>;
 ready: boolean;
 readyCbs: Array<Function>;
 options: RouterOptions;
 mode: string;
 history: HashHistory | HTML5History | AbstractHistory;
 matcher: Matcher;
 fallback: boolean;
 beforeHooks: Array<?NavigationGuard>;
 resolveHooks: Array<?NavigationGuard>;
 afterHooks: Array<?AfterNavigationHook>;
 constructor (options: RouterOptions = {}) {
  this.app = null
  this.apps = []
  this.options = options
  this.beforeHooks = []
  this.resolveHooks = []
  this.afterHooks = []
  // 創(chuàng)建 matcher 匹配函數(shù)
  this.matcher = createMatcher(options.routes || [], this)
  // 根據(jù) mode 實例化具體的 History，默認(rèn)為'hash'模式
  let mode = options.mode || 'hash'
  // 通過 supportsPushState 判斷瀏覽器是否支持'history'模式
  // 如果設(shè)置的是'history'但是如果瀏覽器不支持的話，'history'模式會退回到'hash'模式
  // fallback 是當(dāng)瀏覽器不支持 history.pushState 控制路由是否應(yīng)該回退到 hash 模式。默認(rèn)值為 true。
  this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
  if (this.fallback) {
   mode = 'hash'
  }
  // 不在瀏覽器內(nèi)部的話，就會變成'abstract'模式
  if (!inBrowser) {
   mode = 'abstract'
  }
  this.mode = mode
   // 根據(jù)不同模式選擇實例化對應(yīng)的 History 類
  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:
    if (process.env.NODE_ENV !== 'production') {
     assert(false, `invalid mode: ${mode}`)
    }
  }
 }
 match (
  raw: RawLocation,
  current?: Route,
  redirectedFrom?: Location
 ): Route {
  return this.matcher.match(raw, current, redirectedFrom)
 }
 get currentRoute (): ?Route {
  return this.history && this.history.current
 }
 init (app: any /* Vue component instance */) {
  process.env.NODE_ENV !== 'production' && assert(
   install.installed,
   `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
   `before creating root instance.`
  )
  this.apps.push(app)
  // main app already initialized.
  if (this.app) {
   return
  }
  this.app = app
  const history = this.history
  // 根據(jù)history的類別執(zhí)行相應(yīng)的初始化操作和監(jiān)聽
  if (history instanceof HTML5History) {
   history.transitionTo(history.getCurrentLocation())
  } else if (history instanceof HashHistory) {
   const setupHashListener = () => {
    history.setupListeners()
   }
   history.transitionTo(
    history.getCurrentLocation(),
    setupHashListener,
    setupHashListener
   )
  }
  history.listen(route => {
   this.apps.forEach((app) => {
    app._route = route
   })
  })
 }
 // 路由跳轉(zhuǎn)之前
 beforeEach (fn: Function): Function {
  return registerHook(this.beforeHooks, fn)
 }
 // 路由導(dǎo)航被確認(rèn)之間前
 beforeResolve (fn: Function): Function {
  return registerHook(this.resolveHooks, fn)
 }
 // 路由跳轉(zhuǎn)之后
 afterEach (fn: Function): Function {
  return registerHook(this.afterHooks, fn)
 }
 // 第一次路由跳轉(zhuǎn)完成時被調(diào)用的回調(diào)函數(shù)
 onReady (cb: Function, errorCb?: Function) {
  this.history.onReady(cb, errorCb)
 }
 // 路由報錯
 onError (errorCb: Function) {
  this.history.onError(errorCb)
 }
 // 路由添加，這個方法會向history棧添加一個記錄，點擊后退會返回到上一個頁面。
 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.history.push(location, onComplete, onAbort)
 }
 // 這個方法不會向history里面添加新的記錄，點擊返回，會跳轉(zhuǎn)到上上一個頁面。上一個記錄是不存在的。
 replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.history.replace(location, onComplete, onAbort)
 }
 // 相對于當(dāng)前頁面向前或向后跳轉(zhuǎn)多少個頁面,類似 window.history.go(n)。n可為正數(shù)可為負(fù)數(shù)。正數(shù)返回上一個頁面
 go (n: number) {
  this.history.go(n)
 }
 // 后退到上一個頁面
 back () {
  this.go(-1)
 }
 // 前進(jìn)到下一個頁面
 forward () {
  this.go(1)
 }
 getMatchedComponents (to?: RawLocation | Route): Array<any> {
  const route: any = to
   ? to.matched
    ? to
    : this.resolve(to).route
   : this.currentRoute
  if (!route) {
   return []
  }
  return [].concat.apply([], route.matched.map(m => {
   return Object.keys(m.components).map(key => {
    return m.components[key]
   })
  }))
 }
 resolve (
  to: RawLocation,
  current?: Route,
  append?: boolean
 ): {
  location: Location,
  route: Route,
  href: string,
  // for backwards compat
  normalizedTo: Location,
  resolved: Route
 } {
  const location = normalizeLocation(
   to,
   current || this.history.current,
   append,
   this
  )
  const route = this.match(location, current)
  const fullPath = route.redirectedFrom || route.fullPath
  const base = this.history.base
  const href = createHref(base, fullPath, this.mode)
  return {
   location,
   route,
   href,
   // for backwards compat
   normalizedTo: location,
   resolved: route
  }
 }
 addRoutes (routes: Array<RouteConfig>) {
  this.matcher.addRoutes(routes)
  if (this.history.current !== START) {
   this.history.transitionTo(this.history.getCurrentLocation())
  }
 }
}

window.addEventListener("hashchange",funcRef,false)

export class HashHistory extends History {
 constructor (router: Router, base: ?string, fallback: boolean) {
  super(router, base)
  // check history fallback deeplinking
  // 如果是從history模式降級來的，需要做降級檢查
  if (fallback && checkFallback(this.base)) {
  // 如果降級且做了降級處理，則返回
   return
  }
  ensureSlash()
 }
 .......

function checkFallback (base) {
 const location = getLocation(base)
 // 得到除去base的真正的 location 值
 if (!/^\/#/.test(location)) {
 // 如果此時地址不是以 /# 開頭的
 // 需要做一次降級處理，降為 hash 模式下應(yīng)有的 /# 開頭
  window.location.replace(
   cleanPath(base + '/#' + location)
  )
  return true
 }
}
function ensureSlash (): boolean {
// 得到 hash 值
 const path = getHash()
 if (path.charAt(0) === '/') {
  // 如果是以 / 開頭的，直接返回即可
  return true
 }
 // 不是的話，需要手動保證一次 替換 hash 值
 replaceHash('/' + path)
 return false
}
export function getHash (): string {
 // We can't use window.location.hash here because it's not
 // consistent across browsers - Firefox will pre-decode it!
 // 因為兼容性的問題，這里沒有直接使用 window.location.hash
 // 因為 Firefox decode hash 值
 const href = window.location.href
 const index = href.indexOf('#')
 return index === -1 ? '' : decodeURI(href.slice(index + 1))
}
// 得到hash之前的url地址
function getUrl (path) {
 const href = window.location.href
 const i = href.indexOf('#')
 const base = i >= 0 ? href.slice(0, i) : href
 return `${base}#${path}`
}
// 添加一個hash
function pushHash (path) {
 if (supportsPushState) {
  pushState(getUrl(path))
 } else {
  window.location.hash = path
 }
}
// 替代hash
function replaceHash (path) {
 if (supportsPushState) {
  replaceState(getUrl(path))
 } else {
  window.location.replace(getUrl(path))
 }
}

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const route = this.router.match(location, this.current) //找到匹配路由
  this.confirmTransition(route, () => { //確認(rèn)是否轉(zhuǎn)化
   this.updateRoute(route) //更新route
   onComplete && onComplete(route)
   this.ensureURL()

   // fire ready cbs once
   if (!this.ready) {
    this.ready = true
    this.readyCbs.forEach(cb => { cb(route) })
   }
  }, err => {
   if (onAbort) {
    onAbort(err)
   }
   if (err && !this.ready) {
    this.ready = true
    this.readyErrorCbs.forEach(cb => { cb(err) })
   }
  })
 }
 
//更新路由
updateRoute (route: Route) {
  const prev = this.current // 跳轉(zhuǎn)前路由
  this.current = route // 裝備跳轉(zhuǎn)路由
  this.cb && this.cb(route) // 回調(diào)函數(shù)，這一步很重要，這個回調(diào)函數(shù)在index文件中注冊，會更新被劫持的數(shù)據(jù) _router
  this.router.afterHooks.forEach(hook => {
   hook && hook(route, prev)
  })
 }
}

pushState
export function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 // try...catch the pushState call to get around Safari
 // DOM Exception 18 where it limits to 100 pushState calls
 // 加了 try...catch 是因為 Safari 有調(diào)用 pushState 100 次限制
 // 一旦達(dá)到就會拋出 DOM Exception 18 錯誤
 const history = window.history
 try {
  if (replace) {
  // replace 的話 key 還是當(dāng)前的 key 沒必要生成新的
   history.replaceState({ key: _key }, '', url)
  } else {
  // 重新生成 key
   _key = genKey()
    // 帶入新的 key 值
   history.pushState({ key: _key }, '', url)
  }
 } catch (e) {
 // 達(dá)到限制了 則重新指定新的地址
  window.location[replace ? 'replace' : 'assign'](url)
 }
}

replaceState
// 直接調(diào)用 pushState 傳入 replace 為 true
export function replaceState (url?: string) {
 pushState(url, true)
}

supportsPushState
export const supportsPushState = inBrowser && (function () {
 const ua = window.navigator.userAgent
 if (
  (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
  ua.indexOf('Mobile Safari') !== -1 &&
  ua.indexOf('Chrome') === -1 &&
  ua.indexOf('Windows Phone') === -1
 ) {
  return false
 }
 return window.history && 'pushState' in window.history
})()

setupListeners () {
  window.addEventListener('hashchange', () => {
    if (!ensureSlash()) {
      return
    }
    this.transitionTo(getHash(), route => {
      replaceHash(route.fullPath)
    })
  })
}

export class HTML5History extends History {
 constructor (router: Router, base: ?string) {
  super(router, base)
  const expectScroll = router.options.scrollBehavior //指回滾方式
  const supportsScroll = supportsPushState && expectScroll
  if (supportsScroll) {
   setupScroll()
  }
  const initLocation = getLocation(this.base)
  //監(jiān)控popstate事件
  window.addEventListener('popstate', e => {
   const current = this.current
   // Avoiding first `popstate` event dispatched in some browsers but first
   // history route not updated since async guard at the same time.
   // 避免在某些瀏覽器中首次發(fā)出“popstate”事件
   // 由于同一時間異步監(jiān)聽，history路由沒有同時更新。
   const location = getLocation(this.base)
   if (this.current === START && location === initLocation) {
    return
   }
   this.transitionTo(location, route => {
    if (supportsScroll) {
     handleScroll(router, route, current, true)
    }
   })
  })
 }

//abstract.js實現(xiàn)，這里通過棧的數(shù)據(jù)結(jié)構(gòu)來模擬路由路徑
export class AbstractHistory extends History {
 index: number;
 stack: Array<Route>;

 constructor (router: Router, base: ?string) {
  super(router, base)
  this.stack = []
  this.index = -1
 }
 
 // 對于 go 的模擬
 go (n: number) {
  // 新的歷史記錄位置
  const targetIndex = this.index + n
  // 小于或大于超出則返回
  if (targetIndex < 0 || targetIndex >= this.stack.length) {
   return
  }
  // 取得新的 route 對象
  // 因為是和瀏覽器無關(guān)的 這里得到的一定是已經(jīng)訪問過的
  const route = this.stack[targetIndex]
  // 所以這里直接調(diào)用 confirmTransition 了
  // 而不是調(diào)用 transitionTo 還要走一遍 match 邏輯
  this.confirmTransition(route, () => {
   this.index = targetIndex
   this.updateRoute(route)
  })
 }

//確認(rèn)是否轉(zhuǎn)化路由
 confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
  const current = this.current
  const abort = err => {
   if (isError(err)) {
    if (this.errorCbs.length) {
     this.errorCbs.forEach(cb => { cb(err) })
    } else {
     warn(false, 'uncaught error during route navigation:')
     console.error(err)
    }
   }
   onAbort && onAbort(err)
  }
  //判斷如果前后是同一個路由，不進(jìn)行操作
  if (
   isSameRoute(route, current) &&
   route.matched.length === current.matched.length
  ) {
   this.ensureURL()
   return abort()
  }
  //下面是各類鉤子函數(shù)的處理
  //*********************
  })
 }