8000 Prevent `$route` updating deactivated components when using keep-alive · Issue #2739 · vuejs/vue-router · GitHub
[go: up one dir, main page]
Skip to content

Prevent $route updating deactivated components when using keep-alive #2739

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.

Sign up for GitHub

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

Jump to bottom
Closed
franciscolourenco opened this issue Apr 24, 2019 · 4 comments
Closed

Prevent $route updating deactivated components when using keep-alive #2739

franciscolourenco opened this issue Apr 24, 2019 · 4 comments

Comments

@franciscolourenco
Copy link
franciscolourenco commented Apr 24, 2019 •
edited
Loading

What problem does this feature solve?

When wrapping router-view inside keep-alive, the components which are kept alive, keep updating on every route change, if they depend on any $route properties like $route.name or $route.params.

This kinda defeats the purpose of keep-alive, because even though kept-alive components are not remounted, they update in every route change, even while they are deactivated.

What does the proposed API look like?

The default behavior should be that $route only causes the component to update if the component has been activated.
@posva
Copy link
Member
posva commented Apr 24, 2019

Duplicate of vuejs/vue#8819

@posva posva marked this as a duplicate of vuejs/vue#8819 Apr 24, 2019
@posva posva closed this as completed Apr 24, 2019
@posva posva mentioned this issue Apr 24, 2019
Closed
@franciscolourenco
Copy link
Author

Update:

There are a few practices which seem to prevent the component from updating when using vue-router:

  1. Using component props instead of using $route.params, by setting props:true in the route definition.
  2. Using the router-link component to implement button active states instead of comparing $route properties.

@franciscolourenco
Copy link
Author

So, router-link and route props are implemented in such a way which don't cause the component to update. Can't we do the same with the rest, ie. $route, router-view

@LinusBorg
Copy link
Member

You can always wrap the <router-link> in a normal component to isolate it from the parent's render cylce.

const SolidRouterView = Vue.extend({
  render(h) {
    return h('router-view')
  }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@franciscolourenco @posva @LinusBorg
0