Mi versión de vuejs es 3. Implemento ambas formas de usar keep-alive en mi aplicación.
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;Simplemente, aplico muchos filtros en mi página pero cuando volví a esa página ya no estaban. Ayúdame a resolver este problema. Gracias.
Mantenga vivos los componentes de caché al cambiarlos dinámicamente, lo que retendrá los datos en ese componente en particular mientras se cambia. Use el siguiente código para la integración,
Componenteprincipal.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>Componente1.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>componente2.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>