Skip to content

KeepAlive include/exclude parameters do not work as expected for asynchronously loaded router views #7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
DOOMitru opened this issue Jan 13, 2023 · 2 comments

Comments

@DOOMitru
Copy link

Vue version

3.2.45

Link to minimal reproduction

https://github.com/DOOMitru/async-components-keep-alive-include

Steps to reproduce

In the example repo, there are 3 router links that switch between 3 asynchronously loaded route components - Home, About, Contact. Keep-alive is used to wrap the loaded router view components. Each component contains an input bound to an internal state variable in order to establish state changes for each component.

What is expected?

Case 1: Keep-Alive is used without parameters

  • The state for each component should be maintained between router view changes.

Case 2: Keep-Alive is used with parameter: :include="['about']"

  • The state for the About component should be maintained between router view changes.
  • The state for the other 2 components should be reset between router view changes.

Case 3: Keep-Alive is used with parameter: :exclude="['about']"

  • The state for the About component should be reset between router view changes.
  • The state for the other 2 components should be maintained between router view changes.

What is actually happening?

Case 1: Works as expected.

Case 2: The state is reset for all components

Case 3: The state is maintained for all components

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 15.87 GB / 31.96 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.125
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

This may be related to issue #3529

@hminghe
Copy link

hminghe commented Jan 16, 2023

component name defaulut = file name

@DOOMitru
Copy link
Author

@hminghe is correct. Somehow I missed The match is checked against the component's name in the vue docs and for some reason I assumed it was using the name of the route.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants