vue.js - Vue Router beforeRouteLeave doesn't stop subcomponents -

i have simple question. want cancel sub-component when route changed. here sample. there home component parent. , has subcomponent. want stop interval function when route changes in subcomponent mounted

import home "./components/home.vue"; import "./components/another.vue"; const routes = [     { path: '', component: home },     { path: '/another', component: } ]; const router = new vuerouter({     routes }); const app = new vue({     router  }).$mount('#app'); 

and home component. home.vue

<template>   <sub-component></sub-component> </template> <script type="text/babel">     import subcomponent "./components/subcomponent.vue";     export default {        components:{           'sub-component':subcomponent        }     } </script> 

and subcomponent. subcomponent.vue

<template>    <div> sub component run interval </div> </template> <script type="text/babel">     import subcomponent "./components/subcomponent.vue";     export default {        components:{           'sub-component':subcomponent        },        mounted:function(){            setinterval(function(){              console.log("i should cancel when route changed");            },1000)        }     } </script> 

i tried beforerouteleave method stops home.vue methods.

as using sub-component (inside route component), not able use beforerouteleave directly.

your sub-component child component of route. therefore need trigger exit method of child component route component using child component refs explained in guide page below:

https://vuejs.org/v2/guide/components.html#child-component-refs

you can create reference sub-component follows:

<sub-component ref="mysubcomponent"></sub-component> 

and in route component, can following:

beforerouteleave: function(to, from, next) {     // indicate subcomponent leaving route     this.$refs.mysubcomponent.preparetoexit();     // make sure call next function, otherwise hook never resolved     // ref: https://router.vuejs.org/en/advanced/navigation-guards.html     next(); } 

note: route component calls method in child sub-component called preparetoexit() in example, in can clean-up follows:

methods: {     preparetoexit: function() {         console.log("preparing exit sub component, stopping 'twosecondstimerevents'")         clearinterval(this.twosecondstimerevents)     } } 

here working example: https://jsfiddle.net/mani04/crwuxez3/ (all details logged in console)

please note: example uses vue 2.1.10 , vue-router 2.2.0 (latest versions of today). there issues in previous versions, around navigation guards functions, resolved.

edit: alternate method

after posting above solution, realized there simpler way it. sub-component may not route specific callbacks beforerouteleave, still vue component follows component lifecycle.

so, based on component lifecycle diagram, have beforedestroy callback in sub component can use clear timer.

here how can it:

const subcomponent = vue.component('sub-component', {     template: `...`,     data: function() {...},     mounted: function() {...},     // 'preparetoexit' method not required here     // , there no need handle 'beforerouteleave' in parent     beforedestroy: function() {         console.log("stopping interval timer")         clearinterval(this.twosecondstimerevents)     } }); 

advantages:

1. much simpler earlier approach.
2. no need handle child component refs in parent component.
3. no need trigger cleanup method parent component.

there no disadvantages, trigger not tied route change, incase wanted other actions based on destination route. may use if better.