首先確認< router-view >外層是否有包裹了一層< keep-alive >

如果有包裹：

<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

在data中：

data () {
    return {
      timer: null // 定時器
    }
  },

• 1
• 2
• 3
• 4
• 5

在activated中設定定時器：

activated () {
    this.timer = setInterval(() => {
      //  定時器中執行的程式碼
    }, 30000)
  },

• 1
• 2
• 3
• 4
• 5

在deactivated中清除定時器：

deactivated () {
    // 頁面關閉（路由跳轉）時清除定時器
    clearInterval(this.timer)
    this.timer = null
  },

• 1
• 2
• 3
• 4
• 5

< keep-alive >作用：
< keep-alive > 可以使被包含的元件狀態維持不變，即便是元件切換了，其內的狀態依舊維持在記憶體之中。在下一次顯示時，也不會重現渲染（有快取的作用）。

被包含在 < keep-alive > 中建立的元件，會多出兩個生命週期的鉤子: activated 與 deactivated

activated
在元件被啟用時呼叫，在元件第一次渲染時也會被呼叫，之後每次keep-alive啟用時被呼叫。

deactivated
在元件被停用時呼叫。

注意：只有元件被 keep-alive 包裹時，這兩個生命週期才會被呼叫，如果作為正常元件使用，是不會被呼叫，以及在 2.1.0 版本之後，使用 exclude 排除之後，就算被包裹在 keep-alive中，這兩個鉤子依然不會被呼叫！另外在服務端渲染時此鉤子也不會被呼叫的。

如果沒有包裹

在data中：

data () {
    return {
      timer: null // 定時器
    }
  },

• 1
• 2
• 3
• 4
• 5

在mounted中設定定時器：

mounted() {
    this.timer = setInterval(() => {
      //  定時器中執行的程式碼
    }, 30000)
  },

• 1
• 2
• 3
• 4
• 5

在beforeDestroy中清除定時器：

beforeDestroy() {
    // 頁面關閉（路由跳轉）時清除定時器
    clearInterval(this.timer)
    this.timer = null
  },