(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:

一、setInterval事件和組件的生命週期沒有直接關係。
二、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