Vuex 的原理關鍵：使用 Vue 例項進行狀態管理
Dep是為了全域性管理做的依賴，不是單單在某例項下面，dep裡依賴發生變化，dep會通知所有watcher進行更新：每個vue例項都對應了一個watcher，一旦出現響應式，如message發發生更新，dep會通知所有watcher進行更新，2個vue例項繫結到這裡的message，這兩個watcher會被通知更新，如果vue沒提供響應式機制，多例項進行響應式更新不可能實現，這也是vuex實現基礎。`

vue-router實現原理：vue-router例項化時會初始化 this.history，不同 mode 對應不同的 history；
常用hash模式，預設不傳mode時是hash，對應的HashHistory；

`constructor (options: RouterOptions = {}) {
this.mode = mode

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}`)
    }
}
 

}`

`以 HashHistory 為例，vue-router 的 push 方法實現如下：

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
// $flow-disable-line
if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
this.history.push(location, resolve, reject)
})
} else {
this.history.push(location, onComplete, onAbort)
}``
}`
HashHistory 具體實現了 push 方法：

function pushHash (path) { if (supportsPushState) { pushState(getUrl(path)) } else { window.location.hash = path } }
不同history呼叫的底層方法不一樣，但是底層都是通過window提供的location下面的方法來進行實先，比如監聽
vue-router路由守衛路由的鉤子函式，和元件生命週期一個道理，vue-router把路由守衛分為兩種：全域性守衛和區域性守衛
每一個路由都會觸發的鉤子函式
1.路由進入之前會觸發的事件
router.beforeEach((to, from, next) => { console.log('beforeEach', to, from) next() })
2.vue2.5之後新增的特性，路由被解析之前被呼叫
router.beforeResolve((to, from, next) => { console.log('beforeResolve', to, from) next() })
3.1.路由進入之後會觸發的事件
router.afterEach((to, from) => { console.log('afterEach', to, from) })
全域性守衛沒有辦法獲得vue例項 路由守衛執行在鉤子函式之前，也就是在元件生命週期之前執行路由守衛；
區域性守衛
beforeRouteEnter (to, from, next) { // 不能獲取元件例項 this console.log('beforeRouteEnter', to, from) next() }, beforeRouteUpdate (to, from, next) { console.log('beforeRouteUpdate', to, from) next() }, beforeRouteLeave (to, from, next) { console.log('beforeRouteLeave', to, from) next() }
在元件的區域性守衛中，不能獲取this例項，因為在beforeCreate之前

在vue-element-admin框架中，利用路由守衛做許可權校驗、token判斷