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

这是家庭组件。 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>

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

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

Answer 1

当您使用子组件（在路径组件内）时，您将无法直接使用beforeRouteLeave。

您的子组件是路径的子组件。因此，您需要使用子组件参考从路径组件触发子组件的退出方法，如下面的指南中所述：

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函数，现在已完全解决。

编辑：替代方法

在发布上述解决方案后，我意识到有一种更简单的方法可以做到这一点。您的子组件可能无法获得特定于路由的回调，例如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)
    }
});

优点：

比早期方法简单得多。
无需处理父组件中的任何子组件引用。
无需从父组件触发清理方法。

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

Vue Router beforeRouteLeave不会停止子组件

1 个答案: