Vue 路由器和 setTimeout

Question

我有一个带有 VueRouter 的 Vue 3 页应用程序。在第一页上，我每分钟使用 setTimeout 询问服务器。在移动到下一页时，计时器丢失并在再次打开第一页时重新初始化。我希望计时器继续在后台工作。是否可行以及如何完成？

Answer 1

只需将计时器放在您的根组件中（例如，App.vue），因为该组件将始终存在：

export default {
  mounted() {
    const pages = [ '/page1', '/page2', '/page3' ]
    let currentPage = 0
    this._timerId = setInterval(() => {
      this.$router.push(pages[currentPage++ % pages.length])
    }, 3000) // every 3 seconds
  },
  // Vue 2
  beforeDestroy() {
    clearInterval(this._timerId)
  },
  // Vue 3
  unmounted() {
    clearInterval(this._timerId)
  }
}

demo