[Vuejs]-Reflect changes of same Vue Component to different routes

0πŸ‘

βœ…

I would highly recommend Vuex as per previous comments. But since you are asking for other solutions. Here are some not so elegant approaches:

  1. Global Event Bus – keep the active tab in a global EventBus state that will also listen to changes, and emit changes. As this will not be destroyed between routes, you can get the event bus state on route change (component mount/create).

  2. Use Portal-Vue to teleport filter tab component on demand to other views/routes keeping it’s state. More: https://github.com/LinusBorg/portal-vue

  3. Keep active tab in url hash https://example.com/#tab-1 or URLSearchParam https://example.com/route1?tab=2. And load param/hash on route change/component mount. The biggest downside to that is that you need to manually pass the hash or URL search param to every link.

Leave a comment