保持活力在vue.js中不起作用

Question

我的vuejs版本是3，我在我的应用程序中实现了这两种方法。

1

<template>
  <div id="nav" classs="container is-max-desktop"></div>
<keep-alive>
  <router-view />
</keep-alive>
</template>

<style>
@import "~bulma/css/bulma.css";
</style>

2

import { createRouter, createWebHistory } from "vue-router";
import Index from "../views/Index.vue";
import Create from "../views/Create.vue";
import Edit from "../views/Edit.vue";

const routes = [
  {
    name: "Index",
    path: "/",
    component: Index,
    meta: { KeepAlive: true },
  },
  {
    name: "Edit",
    path: "/edit/:id",
    component: Edit,
    meta: { KeepAlive: true },
  },
  {
    name: "Create",
    path: "/create",
    component: Create,
    meta: { KeepAlive: true },
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

简单地说，我在我的页面上应用了许多过滤器，但是当我回到那个页面时，它们就消失了。帮我解决这个问题。谢谢。

Answer 1

在动态切换组件时保持活动缓存组件，这将在切换时保留该特定组件中的数据。使用下面的代码进行集成，

Maincomponent.vue

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
  
export default {
  components: { Component1, Component2 },
  data() {
    return {
      current: 'Component1'
    }
  }
}
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" value="Component1" /> A</label>
    <label><input type="radio" v-model="current" value="Component2" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

Component1.vue

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <div>
    <p>Current component: A</p>
    <span>count: {{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

Component2.vue

<script>
export default {
  data() {
    return {
      msg: ''
    }
  }
}
</script>


<template>
  <div>
    <p>Current component: B</p>
    <span>Message is: {{ msg }}</span>
    <input v-model="msg">
  </div>
</template>