Child-routes not cached by keep-alive

Question

I am wrapping my router with a keep-alive like so:

<template>
  <section class="app-main">
    <keep-alive :include="['TopLevelRoute', 'ChildRoute']">
      <router-view :key="key" />
    </keep-alive>
  </section>
</template>

Now, my TopLevelRoute is always cached nicely. My ChildRoute on the other hand is never cached. Both components are named components with the names spelled correctly and passed correctly to the include.

Here are my routes:

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'
}

I think the problem stems from ChildRoute being in the children -Array of Info . If I pull ChildRoute out of children and put it on the same level as TopLevelRoute , it is cached just fine.

The routing itself works seamlessly - just the caching is not on my side right now.

I saw a lot of similar questions, but never this specific case, so I hope this is not a duplicate question.

Thank you in advance for your help. I am pretty desperate right now.

Answer 1

As you did not posted the codes related to your router.js and your views, I post the codes related to my views and router.js file that you can test in your local environment to see that it caches ChildRoute states. To test that I used an input tag with a v-model . Here is the code of router.js :

router.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

Here is the code of App.vue that has the navigation and router-view inside it:

App.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>

And finally the codes related to each route has the similar structure like this:

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>

If you test it you can see that the input v-model state is cached in About.vue and ChildRoute.vue , but not in Home.vue .