關於網友提出的“(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 的文檔，也未發現相關配置。
參考文檔：
-
http://vuejs.github.io/vue-router/zh-cn/options.html
-
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