使用Vue.js和vue-router构建SPA时如何销毁组件？

Question

说我的路由器地图如下所示：

router.map({
'/a_example': {
    component: A
},

'/b_example': {
    component: B
},

组件A上每1秒发出一次Ajax请求。我在浏览器中加载/a_example，然后点击component A上的链接转到/b_example。现在浏览器按预期显示组件B.但是，Ajax请求不会停止并仍然每1秒发送一次请求。

我的猜测是vue-router仍然将组件A置于引擎盖下，以免它遇到性能问题。

无论如何，http://vuejs.github.io/vue-router/en/view.html中找到的所有内容都是keep-alive。但它默认是不活跃的，我确信我没有使用它。

我可以使用某种选项吗？

Answer 1

Vue-router提供了许多可选的transition hooks。您可以停止在deactivate挂钩内发送ajax请求。

Vue.component('component-A', {
  route: {
    deactivate: function () {
    //stop sending requests
    }
  }
})

Answer 2

在最新版本的VueRouter（v.2.1.1）中，您可以使用In-Component Guard：

<强> beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteLeave (to, from, next) {
    // stop your requests here
    // ...
    next()
  }
}