vue3用定时器实现页面定时切换

可以使用`setInterval`函数和`vue-router`中的导航守卫来实现页面定时切换。

首先，在Vue组件中使用`setInterval`函数，每隔一定时间触发页面跳转：

export default {
  data() {
    return {
      intervalId: null,
      pageList: ['/home', '/about', '/contact'] // 需要轮播的页面列表
    }
  },
  mounted() {
    this.intervalId = setInterval(() => {
      const currentPageIndex = this.pageList.indexOf(this.$route.path)
      const nextPageIndex = (currentPageIndex + 1) % this.pageList.length
      this.$router.push(this.pageList[nextPageIndex])
    }, 5000) // 每隔5秒钟跳转到下一个页面
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
  }
}

上面的代码中，我们定义了一个`pageList`数组，其中存放需要轮播的页面路径。然后在`mounted`钩子函数中使用`setInterval`函数，每隔5秒钟触发一次页面跳转。在跳转之前，我们通过`indexOf`方法获取当前页面在`pageList`数组中的索引，并计算出下一个页面的索引。然后通过`$router.push`方法跳转到下一个页面。

为了防止组件被销毁时定时器仍然在运行，我们在`beforeDestroy`钩子函数中清除定时器。

最后，我们还需要在`vue-router`中使用导航守卫，确保页面跳转时定时器正常工作：

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

router.beforeEach((to, from, next) => {
  clearInterval(this.intervalId) // 清除定时器
  next()
})

router.afterEach(() => {
  this.intervalId = setInterval(() => {
    const currentPageIndex = this.pageList.indexOf(this.$route.path)
    const nextPageIndex = (currentPageIndex + 1) % this.pageList.length
    this.$router.push(this.pageList[nextPageIndex])
  }, 5000) // 重新启动定时器
})

上面的代码中，我们在`beforeEach`导航守卫中清除定时器，确保页面跳转时定时器不会继续运行。在`afterEach`导航守卫中重新启动定时器，确保页面跳转完成后定时器能够正常工作。