vue router 和 组件生命周期的理解

vue router 分为 h5 history api模式和hash模式，在 Router 的构造函数的参数：mode :history 可以将路由模式改回history

<router-view> 是展示视图的，<router-link> 类似于a标签的，点击即可以跳转到对应的url, router.push 是js api的方式使用 router-link

组件的生命周期是：beforeCreate,created,befoerMount,mounted,beforeDestroy,destroy

keep-alive 的构子函数: activated,deactivated,

路由的构子函数：全局的:beforeEach,afterEach

路由内独享的: beforeEnter

组件内的:beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave

比如 A 有子路由 D,F,从D切换到F执行的是:

D beforeRouterLeave
beforeEach
 A beforeRouterUpdate
 F beforeenter
 F beforeRouterEnter
 afterEach
 A before update
F before create
 F created
F beforemount
 D beforeDestory
 D destoryed
 F mounted
 A updated

即所有执行顺序是 全局的before，父组件beforerouterUpdate,路由的before,组件的before

路由的before 钩子 在 组件的beforeCreate 前执行

前一个组件的 beforeDestroy 在后一个组件的 beforeMount 之后执行,同样适用于组件之间切换

父组件的beforeUpdate 在 子组件beforeCreate 之前，父组件的update 在 子组件mounted后，父组件 beforerouterupdate 在 beforeEach后  

如果是keep-alive 包裹的 router-view 顺序如下

D beforeRouterLeave
 beforeEach
beforeRouterUpdate
 F beforeenter
 F beforeRouterEnter
afterEach
A before update
 D deactivated
 F actived
 A updated

如果父组件没有keep-alive,而子组件keep-alive，子组件不会被keep-alive,但是任然会调用 avtived，和deactivated钩子函数，调用顺序如下，activated在mounted之后调用，deactivated 在 beforeDestroy之前调用

F beforeDestory
D deactivated
 D beforeDestory
 D destoryed
 F destoryed
 F before create
 F created
F beforemount
D before create
 D created
 D beforemount
 D mounted
D actived
 F mounted

keep-alive    表示当前标签下的组件被缓存了，而不是表示某类组件被缓存。使用  $route.meta.keepAlive 可以根据路由动态指定缓存

 如果是从 /a/f 到d组件的，那么 就将他缓存，如果不是则不缓存。比如从/a/f 切到了/a/d  这时执行的是前面的，这里已经被缓存了。下次再从、/a/f 到/a/d会直接取缓存。如果不是则取得是下面的，没有缓存

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

D组件下：

beforeRouteEnter(to,from ,next){

if(from.path=="/a/f")
{
to.meta.keepAlive=true;
}
else
{
to.meta.keepAlive=false;
}
next();
},

 vue 中的 $route 和$router 每个组件中都可以访问这两个对象， $router 在所有组件中都是同一个引用就是 在Vue.use 和new Vue中注入到this中的，所以每个组件都有一个，且引用相同。$route 每个组件新构造的路由信息对象，在同一时刻每个组件中的$route值都是一样的。在 new VueRoute 中定义的  meta 会在$route中，访问到哪个路径，对应的Meta就会将$route上的meta替换。

$router 主要提供路由的操作方法，$route提供路由的信息