15

I have a simple question. I just want to cancel sub-component when route changed. Here is a sample. There is a home component which is the parent. And it has a subcomponent. I just want to stop interval function when route changes in the subcomponent mounted

import Home from "./components/Home.vue";
import Another from "./components/Another.vue";
const routes = [
    { path: '', component: Home },
    { path: '/another', component: Another }
];
const router = new VueRouter({
    routes
});
const app = new Vue({
    router

}).$mount('#app');

And this is home component. Home.vue

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

And this is subcomponent. Subcomponent.vue

<template>
   <div> Sub component will run a interval </div>
</template>
<script type="text/babel">
    import SubComponent from "./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 but it stops only Home.vue methods.

1 Answer 1

26

As you are using a sub-component (inside the route component), you will not be able to use beforeRouteLeave directly.

Your sub-component is a child component of a route. Therefore you need to trigger the exit method of child component from your route component using Child Component Refs as explained in the guide page below:

https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

You can create a reference to your sub-component as follows:

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

And now in your route component, you can do the following:

beforeRouteLeave: function(to, from, next) {
    // Indicate to the SubComponent that we are leaving the route
    this.$refs.mySubComponent.prepareToExit();
    // Make sure to always call the next function, otherwise the hook will never be resolved
    // Ref: https://router.vuejs.org/en/advanced/navigation-guards.html
    next();
}

Note: Your route component calls a method in the child sub-component called prepareToExit() in this example, in which you can do the clean-up as follows:

methods: {
    prepareToExit: function() {
        console.log("Preparing to exit sub component, stopping 'twoSecondsTimerEvents'")
        clearInterval(this.twoSecondsTimerEvents)
    }
}

Here is a working example: https://jsfiddle.net/mani04/crwuxez3/ (all the details logged in console)

Please note: This example uses Vue 2.1.10 and Vue-Router 2.2.0 (latest versions as of today). There were some issues in the previous versions, around Navigation Guards functions, which are now fully resolved.

EDIT: Alternate method

After posting the above solution, I realized that there is a simpler way to do it. Your sub-component may not get route specific callbacks like beforeRouteLeave, but it is still a Vue component that follows component lifecycle.

So, based on the component lifecycle diagram, you will have beforeDestroy callback in the sub component that you can use to clear the timer.

Here is how you can do it:

const SubComponent = Vue.component('sub-component', {
    template: `...`,
    data: function() {...},
    mounted: function() {...},
    // 'prepareToExit' method not required here
    // And also there is no need to handle 'beforeRouteLeave' in parent
    beforeDestroy: function() {
        console.log("Stopping the interval timer")
        clearInterval(this.twoSecondsTimerEvents)
    }
});

Advantages:

  1. Much simpler than the earlier approach.
  2. No need to handle any child component refs in parent component.
  3. No need to trigger the cleanup method from parent component.

There are no disadvantages, but this trigger is not exactly tied to the route change, incase you wanted to do any other actions based on destination route. You may also use this if you like this better.

7
  • Thank you for the answer. it solves my problem. But I think beforeRouteLeave should kill all sub-component processes.. right? Feb 5, 2017 at 11:56
  • Vue router only cleans up Vue specific items. setInterval is part of javascript specs, which runs forever till it is cleared manually or till we navigate away from the page (as per the specs). Feb 5, 2017 at 12:53
  • I just realized that the solution can be much simpler, and I have added an alternative method to my answer. The original method is still valid. You may choose either of these methods based on your requirement. Feb 5, 2017 at 13:10
  • oh very nice. I didn't know such an event that triggers sub component before leaving route. Vue is really awesome Feb 5, 2017 at 15:37
  • 1
    beforeDestroy can do the job but in case you need to access the to, from argument from beforeRouteLeave hook, the beforeDestroy hook can't do though.
    – Son Tr.
    Oct 3, 2022 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.