javascript - How to destroy a component when building SPA with Vue.js and vue-router? - Stack Overflow

admin管理员组

文章数量:1325013

Say I have a router map looks like this:

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

'/b_example': {
    ponent: B
},

There is a Ajax Request every 1 sec on ponent A. I load /a_example in the browser and click the link on the ponent A to go to /b_example. Now the browser is showing ponent B as expected. However, the Ajax Request doesn't stop and still sends request every 1 sec.

My guess is that vue-router still keeps ponent A under the hood so that it won't hit performance issues.

Anyway all I've found out in .html is this keep-alive thing. But it's deactive by default and I am sure I did't use it.

Is there some kind of options I can make use of?

Say I have a router map looks like this:

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

'/b_example': {
    ponent: B
},

There is a Ajax Request every 1 sec on ponent A. I load /a_example in the browser and click the link on the ponent A to go to /b_example. Now the browser is showing ponent B as expected. However, the Ajax Request doesn't stop and still sends request every 1 sec.

My guess is that vue-router still keeps ponent A under the hood so that it won't hit performance issues.

Anyway all I've found out in http://vuejs.github.io/vue-router/en/view.html is this keep-alive thing. But it's deactive by default and I am sure I did't use it.

Is there some kind of options I can make use of?

• javascript
• vue.js

Share Improve this question Follow asked Jan 30, 2016 at 17:28 francisfengfrancisfeng 81811 gold badge1010 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Vue-router provides a number of optional transition hooks. You can stop sending ajax requests inside the deactivate hook.

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

In the latest version of VueRouter (v.2.1.1), you can use an In-Component Guard:

beforeRouteLeave

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

本文标签： javascriptHow to destroy a component when building SPA with Vuejs and vuerouterStack Overflow