vue项目中给路由添加缓存配置

yixiancheng

已于 2022-11-10 09:17:11 修改

阅读量655

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 ecmascript 前端框架

于 2022-10-20 16:01:00 首次发布

本文链接：https://blog.youkuaiyun.com/yixiancheng/article/details/127431160

这篇博客探讨了Vue.js应用程序中`<keep-alive>`组件的使用，特别是其`include`属性和深度优先(`deepth`)缓存策略。通过在`router.js`配置路由元信息，可以控制组件是否应该被缓存。当`keepAlive`设置为`true`时，组件将被缓存，而`deepth`属性用于管理缓存的深度。博客详细解释了如何在`watch`选项中监听路由变化，动态地管理缓存列表，确保正确地添加和移除缓存组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      title: document.title,
      include: [],
    };
  },
  watch: {
    $route(to, from) {
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        let index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    },
  },
  created() {},
  methods: {},
};
</script>

在router.js中设置

  {
    path: 'a/b',
    name: 'b',
    component: b,
    meta: {
      deepth: 1,
      keepAlive: true
    }
  },