keepAlive cache invalidation

[LannyChung]

Describe the bug

The file structure as follows can lead to keepAlive caching being ineffective:

views/login/index.vue
views/register/index.vue

Meanwhile, the following views structure is properly cached:

views/login.vue
views/register.vue

It's worth noting that the code content is identical; it's only the file structure that differs.
App.vue code snippet provided below:

<template>
  <router-view v-slot="{ Component, route }">
      <keep-alive :include="['login', 'register']">
        <component :is="Component" :key="route.path" />
      </keep-alive>
  </router-view>
</template>

<style scoped>

</style>

login code snippet provided below:

<template>
  <el-input v-model="user" placeholder="请输入用户名"/>
  <el-link type="primary"  @click="goRegister">去注册</el-link>
 </template>
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 const user = ref('');
 
 const goRegister = () => {
   router.push('/register');
 };
 </script>
 <style lang='scss' scoped>
  
 </style>

register code snippet provided below:

<template>
  <section>
    <el-input v-model="password" placeholder="请输入密码" />
    <el-link type="primary"  @click="toLogin">去登录</el-link>
  </section>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const password = ref('');
const router = useRouter();

const toLogin = () => {
  router.push('/login');
};
</script>
<style lang='scss' scoped></style>

Reproduction

System Info

*

Used Package Manager

npm

Validations

• Follow the Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A please open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.