Vue3中Vue-Router取消路由导航后恢复select元素选中状态

方法一：绑定响应式变量并手动回滚 #

核心思路是将select的v-model绑定到响应式变量，取消导航时把变量重置为当前路由参数的值，利用Vue响应式系统自动同步视图状态，同时保证后续切换时change事件正常触发。

<template>
  <select v-model="currentActivity">
    <option value="eating">吃饭</option>
    <option value="walking">散步</option>
    <option value="sleeping">睡觉</option>
  </select>
</template>

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

const route = useRoute()
// 从路由参数初始化响应式变量
const currentActivity = ref(route.query.activity || 'eating')

onBeforeRouteUpdate((to, from, next) => {
  if (confirm('确定要切换活动吗？')) {
    next()
  } else {
    // 取消导航时重置变量为原路由参数值
    currentActivity.value = from.query.activity || 'eating'
    next(false)
  }
})
</script>

方法二：强制组件重新渲染（应急方案） #

如果不想调整v-model绑定逻辑，可以通过修改组件key值强制Vue重新渲染select，让它从路由参数重新读取选中状态。这种方法有组件销毁重建的开销，仅作为备选。

<template>
  <select :key="renderKey" :value="route.query.activity" @change="handleChange">
    <option value="eating">吃饭</option>
    <option value="walking">散步</option>
    <option value="sleeping">睡觉</option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const renderKey = ref(0)

const handleChange = (e) => {
  router.push({ query: { ...route.query, activity: e.target.value } })
}

onBeforeRouteUpdate((to, from, next) => {
  if (confirm('确定要切换活动吗？')) {
    next()
  } else {
    // 修改key强制重新渲染select
    renderKey.value += 1
    next(false)
  }
})
</script>

关键注意事项 #

• 优先使用响应式变量绑定的方案，它更符合Vue的设计逻辑，无额外性能开销。
• 取消导航调用next(false)后，必须同步更新select绑定的状态变量，否则会出现视图与路由参数不一致的情况，导致后续change事件无法触发。

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