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提供路由的信息