Component doesn't get destroyed on route change

[huzjakd]

Not sure if this is vue router problem or just vue. But when I switch back and forth between two routes, the component in one of the routes doesn't get destroyed. New instances just get created and each time I visit this route, method from this component get's called multiple times, on every visit method calls get increased by 1.
Here's a fiddle to demonstrate what I mean. Just switch between the two routes and watch the console. Logging the string "bbb" will increase by 1 every time.
What I want is every time I visit the second route ("/withsidebar"), string "bbb" should get logged only once.
https://jsfiddle.net/y2x8y9a7/

[fnlctrl]

It's because your usage of eventHub.$on caused a memory leak, by using a function callback that holds a reference to the component instance each time. You need to call $off to unregister the callback before the component is destroyed.
https://jsfiddle.net/0tj549ey/

Simple rules of thumb when using $on:

1. Never use an anonymous function as callback.
2. Always remember to call $off.

[grandao0]

Thanks for the $off insight.

I´m knew to Vue and I still can´t afford the time to learnd and use Vuex because we don´t even know if the prototype will become a project!

[jigneshparmar126]

https://github.com/jigneshparmar126/switch-button/blob/master/README.md

[jonjhiggins]

Thanks for the clarification @fnlctrl

1. Is it worth mentioning in the documentation that $off should be called on destroying a component? I assumed that Vue would do that by itself.

2. Is there a way to tell if an instance of a component has been fully destroyed / no memory leaks?