I have encountered a frustrating issue with vue-router that keeps bothering me. Every time I navigate between routes, a new instance of the component is created and the old instances remain active in the background!
My expectation was that when I switch to a new route, the old components would be destroyed or at least stop running.
Is there any workaround available to resolve this problem?
You can find a fiddle demonstrating the issue here: https://jsfiddle.net/4xfa2f19/5885/
let foo = {
template: '<div>Foo</div>',
mounted() {
console.log('Mount Foo with uid: ' + this._uid);
setInterval(() => {console.log('Instance ' + this._uid + ' of Foo is running')}, 500);
}
};
let bar = {
template: '<div>Bar</div>',
mounted() {
console.log('Mount Bar with uid: ' + this._uid);
setInterval(() => {console.log('Instance ' + this._uid + ' of Bar is running')}, 500);
}
};
const router = new VueRouter({
routes: [
{ path: '/user/foo', component: foo },
{ path: '/user/bar', component: bar }
]
});
const app = new Vue({ router }).$mount('#app');