未被 keep-alive 缓存的子路由

Question

我正在用这样的 keep-alive 包装我的路由器：

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

现在，我的 TopLevelRoute 总是被很好地缓存。 另一方面，我的 ChildRoute 永远不会被缓存。 这两个组件都是命名组件，名称拼写正确并正确传递给 include。

这是我的路线：

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

我认为问题源于ChildRoute在children -Array of Info中。 如果我将ChildRoute从children中拉出来并将其放在与TopLevelRoute相同的级别，它就会被缓存起来。

路由本身可以无缝运行——只是缓存现在不在我这边。

我看到了很多类似的问题，但从来没有遇到过这种情况，所以我希望这不是重复的问题。

预先感谢您的帮助。 我现在很绝望。

Answer 1

由于您没有发布与您的router.js和视图相关的代码，我发布了与我的视图和router.js文件相关的代码，您可以在本地环境中测试它是否缓存ChildRoute状态。 为了测试我使用了带有v-model的input标签。 这是router.js的代码：

路由器.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

这是App.vue的代码，其中包含导航和router-view ：

应用程序.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>

最后，与每条路线相关的代码具有类似的结构，如下所示：

子路由.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>

如果你测试它，你可以看到输入的v-model state 缓存在About.vue和ChildRoute.vue中，但不在Home.vue中。