Vue.js Vue Router beforeRouteLeave 不会停止子组件

由于使用的是子组件(在管线组件内部)，因此无法直接使用beforeRouteLeave.

您的子组件是路由的child component.因此，您需要使用Child Component Refs从路由组件触发子组件的退出方法，如下指南页面所述:

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

可以按如下方式创建对子零部件的引用:

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

现在在路由组件中，您可以执行以下操作:

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();
}

注意:在本例中，路由组件调用名为prepareToExit()的子组件中的一个方法，在该子组件中，您可以按如下方式进行清理:

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

下面是一个工作示例:https://jsfiddle.net/mani04/crwuxez3/(所有详细信息都记录在控制台中)

请注意:此示例使用Vue 2.1.10和Vue Router 2.2.0(截至今天的最新版本).以前的版本中有一些问题，大约有Navigation Guards个功能，现在已经完全解决了.

EDIT: Alternate method

在发布了上述解决方案后，我意识到有一种更简单的方法.您的子组件可能不会得到像beforeRouteLeave这样的路由特定回调，但它仍然是一个遵循组件生命周期的Vue组件.

因此，基于component lifecycle diagram，子组件中有beforeDestroy个回调，可以用来清除计时器.

以下是你可以做到的:

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)
    }
});

优势:

1. 比之前的方法简单得多.
2. 不需要处理父组件中的任何子组件引用.
3. 无需从父组件触发清理方法.

没有缺点，但是这个触发器并不完全与路由更改相关联，以防您想根据目的地路由执行任何其他操作.如果你更喜欢这个，你也可以用它.