search

hannoeru / vite-plugin-pages

File system based route generator for ⚡️Vite
MIT License
1.84k stars 127 forks source link

keepAlive cache invalidation #466

Closed LannyChung closed 4 months ago

LannyChung commented 6 months ago

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