保持活动未缓存子路由

Question

我正在用一个像这样的保活程序包装我的路由器：

<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在Info的children-阵列中。如果我从children中取出ChildRoute，并将其放在与TopLevelRoute相同的级别上，那么它的缓存就很好。

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

我看到了很多类似的问题，但从来没有这个具体的案例，所以我希望这不是一个重复的问题。

提前感谢您的帮助！我现在非常绝望。

Answer 1

由于您没有发布与router.js和视图相关的代码，我发布了与视图和router.js文件相关的代码。您可以在本地环境中测试这些代码，以查看它是否缓存ChildRoute状态。为了测试这一点，我使用了一个带有v-model的input标签。这是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

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

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>

最后，与每条路线相关的代码都有类似的结构：

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>

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