(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？

关于网友提出的“(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？
”问题疑问，本网通过在网上对“(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题：(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？
描述:

我有一个单页面应用，有页面A和页面B，二者是同级组件，关系是这样的：

　

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

'/b': {
    component: B
},`

例如，第一次打开时，显示页面 A，页面 A 有一个setInterval事件，每隔一秒钟会向后台发送一个Ajax请求。这时我点击页面 A 上的跳转按钮，跳到页面 B，通过观察网络连接，发现页面 A 上的Ajax请求仍然在继续。

请问应当进行什么样的设置，才能使得页面切换时，原来的组件就被销毁？

这是个非常严重的问题，同级组件绑定的事件，还会在另一个组件里继续监听。所以我猜想会有简单的配置方法，但我看遍了 Vue 的文档和 Vue-router 的文档，也未发现相关配置。

参考文档：

1. http://vuejs.github.io/vue-router/zh-cn/options.html

2. http://vuejs.org/guide/

 

---

解决方案1:

1、setInterval事件和组件的生命周期没有直接关系。
2、setInterval会返回一个ID 值。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

解决方案2:

router切换时，原来的组件确实已经销毁了，你可以看到ready生命周期函数是每次都触发了的。你这里的问题不在于组件是否销毁，因为setInterval事件本身和组件没有关系。

setInterval相当于该组件申请的一种资源，在使用该组件时获取，在离开该组件时释放。这个过程只能是你手动进行的。所以你应该在离开该组件时，比如route的deactivate或者beforeDestory生命周期函数里手动clearInterval。

其实很多框架里都是这样，比如桌面程序中某个窗口初始化时需要打开数据库连接（我们也可以视为一种资源），当窗口关闭时，程序本身并不知道“打开数据库连接”的反向操作是什么。所以我们需要在窗口销毁的回调方法里手动去释放这个资源，去写断开连接的代码。

解决方案3:

http://stackoverflow.com/questions/35104770/how-to-destroy-a-component-when-building-spa-with-vue-js-and-vue-router

http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html

以上介绍了“(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/1037580.html