vue3缓存页⾯keep-alive及路由统⼀处理详解
⽬录
⼀、前⾔
⼆、使⽤
1.vue2和vue3的不同
2.页⾯某些数据不需要缓存
3.动态设置keepAlive属性
4.使⽤include，exclude配置需要缓存的组件
5.部分页⾯过来需要缓存，部分页⾯过来需要刷新
6.缓存只在⼀级路由⽣效
总结
⼀、前⾔
当使⽤路由跳转到其他页⾯的时候，要求缓存当前页⾯，⽐如列表页⾯跳转到详情页⾯，需要缓存列表内容，并且保存滚动条位置，也有时候需要缓存的页⾯⾥⾯有部分内容不缓存，总之各种情况，下⾯就列举其中⼀些例⼦
vue2和vue3的使⽤⽅式是不⼀样的
created()⽅法和mounted()⽅法在页⾯初始化的时候会执⾏，如果缓存了页⾯，这两个⽅法都不会再执⾏，还有如果缓存了页⾯，vue2中的destroyed()和vue3中的unmounted()⽅法都不会执⾏
activated()⽅法在每次进⼊页⾯都会执⾏
⼆、使⽤
1.vue2和vue3的不同
vue2：
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- vue2.x配置 -->
<keep-alive>
<router-view v-if="$a.keepAlive" />
</keep-alive>
<router-view v-if="!$a.keepAlive"/>
</template>
vue3：
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- vue3.0配置 Component是固定写法-->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"  v-if="$a.keepAlive"/>
</keep-alive>
<component :is="Component"  v-if="!$a.keepAlive"/>
</router-view>
</template>
route.js中配置：
path: '/',
name: 'Home',
component: Home,
meta:{
keepAlive: true
}
效果：
2.页⾯某些数据不需要缓存
可以在activated()⽅法中处理需要部分刷新的逻辑
...
需要部分刷新的数据：<input type="text" v-model="newStr" />
...
data() {
return {
newStr: "2",
};
},
mounted() {
console.log("执⾏了mounted⽅法");
},
activated() {
console.log("执⾏了actived⽅法。。。");
}
效果：
3.动态设置keepAlive属性
也可以在vue⽂件中设置keepAlive属性，实测只有在beforeRouteEnter()⽅法中添加才会⽣效，即进⼊页⾯的时候在Home.vue中添加：
// 使⽤组件内守卫，对离开页⾯事件做⼀些操作
// to为即将跳转的路由，from为上⼀个页⾯路由
beforeRouteEnter(to, from, next) {
// 路由继续跳转
next();
}
4.使⽤include，exclude配置需要缓存的组件
在app.vue中配置：
<router-view v-slot="{ Component }">
<keep-alive include="testKA">
<component :is="Component"/>
</keep-alive>
</router-view>
其中，testKA对应某个组件的name：
export default {
name:'testKA',// keep-alive中include属性匹配组件name
data() {return {}},
activated() {
// keepalive缓存的页⾯每次进⼊都会进⾏的⽣命周期
},
}
此外，include⽤法还有如下：
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使⽤ `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使⽤ `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
exclude⽤法与include⽤法相同，代表不被缓存的组件。
5.部分页⾯过来需要缓存，部分页⾯过来需要刷新
描述：如有a,b,c三个页⾯，a->b时，b刷新页⾯，然后b->c,c->b时，b不刷新页⾯，再b->a,a->b时，b刷新页⾯。⾃测，只有配合vuex才能实现，但是缺点是，页⾯缓存的时候不执⾏activated()⽅法
6.缓存只在⼀级路由⽣效
如果需要在⼆级路由使⽤缓存，可以在⼀级路由中进⾏同样的配置
store.js代码：
state: {
keepAlives:[]
},
mutations: {
SET_KEEP_ALIVE(state,params) {
state.keepAlives = params
}
},
getters:{
keepAlive:function(state){
return state.keepAlives
}
}
App.vue代码：
<template>
<div id="nav">
<router-link to="/bbb">BBB</router-link> |
<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view v-slot="{ Component }">
<keep-alive :include="keepAlive">
<component :is="Component"/>
</keep-alive>
</router-view>
</template>
<script>
export default{
computed:{
keepAlive(){
return this.$s.keepAlive
}
}
}
</script>
react router的state和searchHome.vue代码：
// 使⽤组件内守卫，对离开页⾯事件做⼀些操作
// to为即将跳转的路由，from为上⼀个页⾯路由
beforeRouteEnter(to, from, next) {
next(vm=>{
if(from.path == "/bbb"){
vm.$storemit("SET_KEEP_ALIVE",["Home"])
}
});
},
beforeRouteLeave(to, from, next) {
if (to.path == "/about") {
console.log("将要跳转/about页⾯...")
} else {
console.log("将要跳转⾮/about页⾯...")
this.$storemit("SET_KEEP_ALIVE",[])
}
// 路由继续跳转
next();
}
效果：
总结
到此这篇关于vue3缓存页⾯keep-alive及路由统⼀处理的⽂章就介绍到这了，更多相关vue3缓存页⾯keep-alive内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！