业务场景:三个页面,A,B,C A进入的B,B不进行缓存,B进入C,C回到B,B页面缓存
vue3中的项目目录
使用keepAlive进行缓存
App.vue
<template>
<nav>
<router-link to="/">A</router-link> |
<router-link to="/about">B</router-link>|
<router-link to="/c">C</router-link>
</nav>
<router-view v-slot="{ Component }">
<keep-alive >
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
router/index.js路由文件
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/c',
name: 'c',
meta: {
title: 'Page C',
keepAlive: false
},
component: () => import('../views/c.vue')
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
HomeView.vue
<template>
<div class="home">A</div>
</template>
<script>
export default {
name: "HomeView",
};
</script>
AboutView.vue
<template>
<div class="about">
<h1><input type="text" /></h1>
</div>
</template>
<script>
export default {
name: 'AboutView',
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
const route = useRoute();
const router = useRouter();
const changeRouterKeepAlive = (name, keepAlive) => {
router.options.routes.map((item) => {
if (item.name === name) {
item.meta.keepAlive = keepAlive;
}
});
};
onBeforeRouteLeave((to, from) => {
if (to.name !== 'c') {
// 不是去 c 页面,不缓存
changeRouterKeepAlive(from.name, false);
} else {
changeRouterKeepAlive(from.name, true);
}
});
</script>
c.vue
<template>C</template>
<!-- vue3 不用显式声明 name 属性;
<keep-alive> 缓存组件需要单独的写一个 script block -->
<script>
export default {
name: "c",
inheritAttrs: false,
customOptions: {},
};
</script>
<script setup>
</script>
缓存效果
扫描二维码关注公众号,回复:
14870766 查看本文章