🐛 [Bug]:keep-alive时不起作用，无法实现路由缓存

[Real047]

Version

tiny v1.1.0

node-version

v16.20.2

Link to minimal reproduction

No response

Step to reproduce

为了实现Tabs切换功能，我要用到路由缓存keep-alive，但一直不起作用，试了很多种方法还是一样，然后新建项目试了一下还是keepalive不生效，没法实现路由缓存。

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: does not work when keep-alive, route caching cannot be implemented

[fengyon]

感谢您的反馈，请提供一下复现demo，以便更快地排查此问题

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Thank you for your feedback. Please provide a reproduction demo to troubleshoot this issue faster.

[Real047]

好的，下面提供了页面的源代码和效果，要达到的目的

router-view和keep-alive使用的页面

页面A

页面B

效果
页面A

页面B

目的
我需要实现切换路由时缓存各页面的input保留输入的数据，不重新加载页面，不重新发送请求（不仅是input）

[Real047]

demo 源代码
keep_alive.zip

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

[shenjunjian]

经过分析，原因是因为 keep/index.vue 这一层组件在切换路由时， 整体切换了，所以它里面的keep-alive也不会有效果。
证明图：

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

After analysis, the reason is that the keep/index.vue layer component is switched as a whole when switching routes, so the keep-alive inside it will not have any effect**.
Proof diagram:

[shenjunjian]

【方案一】不依赖路由， 仅在页面级进行组件切换，验证缓存
将A,B直接引入 index.vue
index.vue的模板改为：

    <keep-alive>
      <component :is="curr.value" />
    </keep-alive>

脚本：

import { ref ,reactive ,markRaw} from 'vue'
import { RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
import AVue from "./A/index.vue"
import BVue from "./B/index.vue"

const activeName = ref('A')
const curr= reactive({
  value: markRaw(AVue)
})
const onChange = (event: any) => {
  if(event==='A'){
    curr.value=markRaw(AVue)
  }else{
    curr.value=markRaw(BVue)
  }
}

[shenjunjian]

【方案2】 使用路由缓存， 但是路由的keey-alive要在上级路由中添加
打开 src/layout/page-layout.vue 添加：

  <router-view v-slot="{ Component, route }">
    <keep-alive>
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
  </router-view>

然后index.vue不需要变化。

结论： 想缓存keep中的路由页面，必须在keep的父级的router-view进行缓存。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

[Option 2] Use route cache, but the keey-alive of the route must be added to the upper-level route.
Open src/layout/page-layout.vue and add:

  <router-view v-slot="{ Component, route }">
    <keep-alive>
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
  </router-view>

Then index.vue does not need to change.

Conclusion: If you want to cache the routing page in keep, you must cache it in the router-view of the parent of keep.