vue3中监听路由，被重复执行问题

vue3中监听路由，被重复执行问题

项目场景：监听route变化，当已经离开了页面，watch却还在被触发

---

问题描述

本来我是在Layout文件中监听了路由 但是我发现我前往非Layout下的路由,比如404页面，watch依旧被触发，并且从404页面返回时，watch会一直执行两次，除非刷新
Layout/index.vue

watch(() => route, (val) => {
    // ...
  }, {
    immediate: true,
    deep: true
  })

---

解决方案：

const stopWatchRoute = watch(() => route, (val) => {
    // ...
  }, {
    immediate: true,
    deep: true
  })
  // 方案一： 这样可以解决从404页面返回Layout相关页面 watch会一直执行两次的问题 但是从Layout相关页面到404页面依旧会有一次执行
onUnmounted(() => {
   stopWatchRoute()
})

// 方案二： 在route离开时 销毁watch， 这样可以保证 不管是从Layout相关页面到404页面  还是404页面返回Layout相关页面 都不会多次执行
onBeforeRouteLeave(() => {
   stopWatchRoute()
})