Vue路由组件onBeforeRouteUpdate更新后onUpdated触发两次求助

当路由复用当前组件时，onBeforeRouteUpdate钩子会在路由更新前触发：

1. 你在这个钩子中修改count，会立即触发一次组件更新，导致onUpdated第一次执行；
2. 路由更新完成后，即使模板没有直接使用$route，Vue Router的组件复用机制仍会触发组件的第二次更新，导致onUpdated再次执行。

推荐以下两种方案：

方案一：使用watch监听路由变化（带flush: 'post'） #

通过watch监听路由实例，并设置flush: 'post'，确保在路由更新完成后再修改count，让路由更新和数据更新的触发逻辑合并，只触发一次onUpdated：

<template>
  <div>{{count}}</div>
</template>

<script setup>
import { ref, onUpdated, watch } from 'vue'
import { useRoute } from 'vue-router'

const count = ref(0)
const route = useRoute()
onUpdated(() => console.log('updated'))

// 监听路由变化，在路由更新完成后修改count
watch(route, () => {
  count.value += 1
}, { flush: 'post' })
</script>

方案二：改用onAfterRouteUpdate钩子 #

onAfterRouteUpdate是在路由完全更新完成后触发的钩子，此时路由复用的组件更新已经完成，再修改count只会触发一次由数据变化导致的onUpdated：

<template>
  <div>{{count}}</div>
</template>

<script setup>
import { ref, onUpdated } from 'vue'
import { onAfterRouteUpdate } from 'vue-router'

const count = ref(0)
onUpdated(() => console.log('updated'))

onAfterRouteUpdate((to, from) => {
  count.value += 1
})
</script>

内容的提问来源于stack exchange，提问作者LyPeng