vuejs2 - Vue Router beforeRouteLeave 不会停止子组件

Question

我有一个简单的问题。我只想在路线更改时取消子组件。这是一个示例。有一个家庭组件，它是父组件。它有一个子组件。我只想在挂载的子组件中的路由发生变化时停止间隔函数

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

这是主页组件。首页.vue

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

这是子组件。子组件.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>

我试过 beforeRouteLeave 方法，但它只停止 Home.vue 方法。

Answer 1

由于您正在使用子组件(在路由组件内)，您将无法直接使用 beforeRouteLeave。

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

https://v2.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功能，现在已完全解决。

编辑:替代方法

在发布了上面的解决方案之后，我意识到有一个更简单的方法可以做到这一点。您的子组件可能不会像 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. 无需从父组件触发清理方法。

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