Skip to content

Add keep-alive functionality #18561

New issue

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

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

Already on GitHub? # to your account

Closed

Conversation

michaeltintiuc
Copy link
Contributor

@michaeltintiuc michaeltintiuc commented Jun 17, 2019

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

There is no way to cache components using ion-vue-router due limitations imposed by Vue API which state that keep-alive should be a direct child of transition when used together.

Issue Number: N/A

What is the new behavior?

Allows usage of keep-alive as a property of ion-vue-router

Basic usage:

<ion-vue-router keep-alive />

Equates to:

<keep-alive>
  <router-view />
</keep-alive>

Passing props:
<ion-vue-router :keep-alive="{ include: 'SomeComponent' }" />

Equates to:

<keep-alive include="SomeComponent">
  <router-view />
</keep-alive>

Same as the original API you can pass string, string[] or RegExp to include and exclude properties.

RegExp:
<ion-vue-router :keep-alive="{ include: /Some/ }" />

Equates to:

<keep-alive :include="/Some/">
  <router-view />
</keep-alive>

Does this introduce a breaking change?

  • Yes
  • No

@ionitron-bot ionitron-bot bot added the package: vue @ionic/vue package label Jun 17, 2019
@Livijn
Copy link

Livijn commented Jul 11, 2019

This would be very good!

@Livijn
Copy link

Livijn commented Jul 30, 2019

@mhartington Lets merge this, shall we?

@ggirardi1
Copy link

Is this implementation already working?

@michaeltintiuc
Copy link
Contributor Author

@guilhermeagirardi would appreciate you testing this feature here https://github.com/ModusCreateOrg/ionic-vue if building from source is a problem. Consider this PR an RFC, any feedback is highly valuable

@liamdebeasi
Copy link
Contributor

Thanks for the PR! I am going to close this as this is for the old Ionic Vue code base.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants