Skip to content
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

Add keep-alive functionality #18561

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?

@guilhermeagirardi
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
Member

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

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

Successfully merging this pull request may close these issues.

None yet

4 participants