问题是select的值需要重置：

<script setup lang="ts">
import {useRoute, onBeforeRouteUpdate, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const selectRef = ref()

onBeforeRouteUpdate((to, from, next) => {
  const result = confirm("Are you sure you want to leave? You will lose any unsaved changes.");
  if (result) {
    next();
  } else {
    next(false);
    selectRef.value.value = from.params.state;
  }
});

async function updateRoute(event) {
  await router.push({params: {state: event.target.value}});
}

const states = ["eating", "idle", "walking"]
</script>

<template>

  <select @change="updateRoute" ref="selectRef">
    <option value="">Please select one</option>
    <option v-for="state in states" :value="state" :selected="state == route.params.state">{{state }}</option>
  </select>

</template>

这是因为<select>的值甚至在提示用户之前就已经更改了，并且在您的代码中没有取消更改或恢复更改的逻辑。你可以做的是为<select>使用一个ref（这将取代你的逻辑，它只是一个双向绑定，然后你可以利用它来编程地改变你代码中的值），并使用一个watcher来观察它的变化。这样，您就可以拦截任何更改，并在需要时恢复它们。这就是更新后的代码的样子：

<script setup lang="ts">
import { ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const selectRef = ref(null);  // we initialize with null

async function updateRoute(event) {
  await router.push({params: {state: event.target.value}});
};

// Won't be triggered until the component is mounted
watch(selectRef, (oldVal, newVal) => {
  const result = confirm("Are you sure you want to leave? You will lose any unsaved changes.");
  if (result) {
    await updateRoute();
  } else {
    // Undo the change
    selectRef.value = oldVal
  }
});

const states = ["eating", "idle", "walking"]
</script>

<template>

  <select ref="selectRef">
    <option value="">Please select one</option>
    <option v-for="state in states" :value="state" :selected="state == route.params.state">{{state }}</option>
  </select>

</template>