一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用
keep-alive
来实现;
keep-alive 是 Vue 的内置组件,它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中;
1.语法
<!-- 对应组件的路由出口使用<keep-alive>包裹->这样写表示该路由出口下的所有组件都缓存 -->
<keep-alive><router-view/></keep-alive>
<!-- 仅缓存某个组件-->
<keep-alive include='缓存组件的name属性值'><router-view/></keep-alive>
<!--除了某个组件外其余都需要缓存-->
<keep-alive exclude='不需要缓存name属性值'><router-view/></keep-alive>
2.举例说明
现在有about.vue组件与home.vue组件两个组件,每个组件有个input标签
// home组件
<template>
<div class="home">
<input type="text" />
<button @click="test">点击跳转到about页面</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
test () {
this.$router.push('/about')
}
}
}
</script>
// about组件
<template>
<div class="about">
<input type="text" />
<button @click="test">点击跳转到home</button>
</div>
</template>
<script>
export default {
name: 'About',
methods: {
test () {
this.$router.push('/')
}
}
}
</script>
// app.vue路由出口
<template>
<div id="app">
<!-- 路由出口 -->
<router-view />
</div>
</template>
上述代码在点击按钮进行切换的时候,组件已经默认被销毁了,input框中的内容不会被保留
<template>
<div id="app">
<keep-alive include='About'> <router-view /> </keep-alive>
</div>
</template>
上述代码中about组件被缓存,在切换组件的时候,about组件不会被销毁,内容被保留,但是home组件在切换的时候,内容不会保留
3.使用路由元信息来实现缓存(条件缓存)
// 路由配置
const routes=[
{path:'/about',
component:About,
meta:{
keepAlive:true
}},
{path:'/',
component:Home,
}
]
<template>
<div id="app">
<keep-alive>
<!-- 路由出口-->
<router-view v-if='$route.meta.keepAlive'> <router-view />
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'> <router-view />
</div>
</template>
4.生命周期钩子
由于组件被缓存了,因此在组件切换的时候,并不会执行生命周期钩子,此时添加了两个生命周期钩子用作标识(keep-alive专属)
- activated;
- 进入组件时执行;
- deactivated;
- 切换组件时执行;
5.作用
在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
问题
需求:在页面A跳转到页面B,并在B页面的created中根据url中传递过来的参数做一定的逻辑处理
实现1:
tabchange: function (item) {
this.$router.replace(item.target)
},
实现2
tabchange: function (item) {
location.href=this.pagehost + item.target
},
问题:
- 实现1:跳转没问题,但是逻辑处理没有实现,仔细检查发现跳转过来没有走created生命周期函数(只有第一次正常执行)
- 实现2: 功能正常实现
原因:
- 组件被缓存了,只有第一次进入页面才会走生命周期函数,其余时候不会执行
- location.href不属性vue内部的,在进行页面跳转时不受vue显示,相当于跳转到一个新的页面—> 仍旧会走生命周期函数!