Vue-router
Vue-router-全局导航守卫: beforeEach() 跟 afterEach()是全局守卫,只要跳转就会调用这两个函数
1、beforeEach(): 前置守卫(guard)
:
#全局导航守卫应用: 动态修改网页的标题? beforeEach函数的使用, 当然我们也可以在每个vue页面实现create(){document.title="首页"},页面太多无法维护,所以使用导航守卫, 前置钩子beforeEach(),就是路由跳转回调,跳转之前就把标题给改掉。
{
path: '/user/:id',
component: User,
meta: {
title: '首页'
}
}
# 当我们从 一个路由 跳转到 另一个路由 的时候,就会执行这个函数
router.beforeEach((to, from, next) => {
// 从 from 跳转到 to
document.title = to.meta.title //如果路由存在嵌套,是拿不到的,会显示undefind,需要改进: document.title = to.matched=[0].meta.title
next() //next必须调用,否则无法跳转
})
2、afterEach(): 后置钩子(hook)
:
#在路由跳转之后进行回调
router.afterEach((to, from) =>{
})
3、除了全局守卫,还有路由独享守卫、组件内守卫等
:
{
path: '/user/:id',
component: User,
meta: {
title: '首页'
},
beforeEnter: (to, from, next) => { //在beforeEach后, afterEach前执行
console.log("about beforeEnter")
next()
}
}
keep-alive 遇见 vue-router
keep-alive是vue内置的组件: 可以缓存,避免重新渲染
router-view 也是一个组件: 如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存
在首页写如代码进行测试
create(){
console.log("home created...")
}
destory(){
console.log("home destory...")
}
当我们从首页跳转到其他路由页面时,执行destory()。每次创建销毁,重新创建新的,将代码包含在keep-alive标签中就行,这样路由是不会被销毁的,只会创建一次
<keep-alive>
<router-view/> //这个标签相当于占位
</keep-alive>
注: 保持路由状态代码如下:
activated(){
this.$router.push(this.path)
} 跟
deactivated(){
console.log('deactivated...')
}这两个函数只有使用了<keep-alive>标签才能生效。
beforeRouteLeaver(to, from, next){
console.log(this.$route.path)
this.path = this.$route.path;
next()
}
2)、如果先要单独某个组件不被缓存,重新创建,只需要添加属性即可,如下
<keep-alive excude='Profile,Home'> //Profile,Home是组件name名字,Profile,Home组件之间不可以加上空格。
<router-view/>
</keep-alive>