Estoy envolviendo mi enrutador con un keep-alive así:
<template> <section class="app-main"> <keep-alive :include="['TopLevelRoute', 'ChildRoute']"> <router-view :key="key" /> </keep-alive> </section> </template>Ahora, mi TopLevelRoute siempre se almacena en caché muy bien. My ChildRoute, por otro lado, nunca se almacena en caché. Ambos componentes son componentes con nombre con los nombres escritos correctamente y pasados correctamente a la inclusión.
Aquí están mis rutas:
children: [ { children: [ { component: ChildRoute, meta: { title: 'ChildRoute' }, name: 'ChildRoute', path: 'child-route' }, // more child-components here ], component: Info, meta: { title: 'Info' }, name: 'Info', path: 'info', redirect: 'noRedirect' }, { component: TopLevelRoute, meta: { title: 'TopLevelRoute' }, name: 'TopLevelRoute', path: 'top-level-route' }, // more child-components here ], component: Account, meta: { icon: 'id', title: 'Account' }, name: 'Account', path: '/account', redirect: 'noRedirect' } Creo que el problema se debe a que ChildRoute está en children -Array of Info . Si ChildRoute de los children y lo coloco en el mismo nivel que TopLevelRoute , se almacena en caché sin problemas.
El enrutamiento en sí funciona a la perfección, solo que el almacenamiento en caché no está de mi lado en este momento.
Vi muchas preguntas similares, pero nunca este caso específico, así que espero que esta no sea una pregunta duplicada.
¡Gracias de antemano por su ayuda! Estoy bastante desesperado ahora mismo.
Como no publicó los códigos relacionados con su router.js y sus vistas, publico los códigos relacionados con mis vistas y el archivo router.js que puede probar en su entorno local para ver si almacena en caché los estados ChildRoute . Para probar que usé una etiqueta de input con un v-model . Aquí está el código de router.js :
enrutador.js:
import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; import Search from "../views/Search"; import ChildRoute from "../views/ChildRoute" Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { 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') }, { path: '/Search/ChildRoute', name: 'ChildRoute', component: ChildRoute }, { path: '/Search', name: 'Search', component: Search } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router Aquí está el código de App.vue que tiene la navegación y router-view dentro:
Aplicación.vue:
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/search">Search</router-link> | <router-link to="/search/childroute">ChildRoute</router-link> | </div> <section class="app-main"> <keep-alive :include="['About', 'ChildRoute']"> <router-view :key="$route.fullPath" /> </keep-alive> </section> </div> </template>Y finalmente los códigos relacionados con cada ruta tiene una estructura similar a esta:
ChildRoute.vue:
<template> <div> <h1>ChildRoute component</h1> <input type="text" v-model="chachedData"> <!-- other html tags ... --> </div> </template> <script> export default { name: "ChildRoute", data() { return { chachedData: "" } }, } </script> <style scoped> </style> Si lo prueba, puede ver que el estado v-model entrada se almacena en caché en About.vue y ChildRoute.vue , pero no en Home.vue .