vuex

Vuex 的原理关键：使用 Vue 实例进行状态管理
Dep是为了全局管理做的依赖，不是单单在某实例下面，dep里依赖发生变化，dep会通知所有watcher进行更新：每个vue实例都对应了一个watcher，一旦出现响应式，如message发发生更新，dep会通知所有watcher进行更新，2个vue实例绑定到这里的message，这两个watcher会被通知更新，如果vue没提供响应式机制，多实例进行响应式更新不可能实现，这也是vuex实现基础。`

{{data}}

{{data2}}

change

`

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判断
路由元信息
通过 meta 定义路由元信息
const routes = [ { path: '/a', component: A, meta: { title: 'Custom Title A' } } ]

使用 meta 信息动态修改标题
router.beforeEach((to, from, next) => { console.log('beforeEach', to, from) if (to.meta && to.meta.title) { document.title = to.meta.title } else { document.title = 'default title' } next() })