[英]Child-routes not cached by keep-alive
I am wrapping my router with a keep-alive like so:我正在用这样的 keep-alive 包装我的路由器:
<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.现在,我的 TopLevelRoute 总是被很好地缓存。 My ChildRoute on the other hand is never cached.
另一方面,我的 ChildRoute 永远不会被缓存。 Both components are named components with the names spelled correctly and passed correctly to the include.
这两个组件都是命名组件,名称拼写正确并正确传递给 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
.我认为问题源于
ChildRoute
在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.如果我将
ChildRoute
从children
中拉出来并将其放在与TopLevelRoute
相同的级别,它就会被缓存起来。
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.
我现在很绝望。
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.由于您没有发布与您的
router.js
和视图相关的代码,我发布了与我的视图和router.js
文件相关的代码,您可以在本地环境中测试它是否缓存ChildRoute
状态。 To test that I used an input
tag with a v-model
.为了测试我使用了带有
v-model
的input
标签。 Here is the code of router.js
:这是
router.js
的代码:
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
Here is the code of App.vue
that has the navigation and router-view
inside it:这是
App.vue
的代码,其中包含导航和router-view
:
App.vue:
应用程序.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:
子路由.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
.如果你测试它,你可以看到输入的
v-model
state 缓存在About.vue
和ChildRoute.vue
中,但不在Home.vue
中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.