Vue3中的缓存问题

业务场景：三个页面，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>

缓存效果

猜你喜欢