Vue3同视图路由切换内容不更新问题及解决方案咨询

先修复响应式赋值错误 #

你的SingleBoard.vue中watch的赋值方式有误，直接替换ref变量会破坏响应式绑定，应该使用.value更新：

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import BoardContainer from "@/modules/boards/BoardContainer.vue";

const route = useRoute();
let dbName = ref(route.params.dbName);
let dbMethod = ref(route.params.dbMethod);
let securityType = ref(route.params.securityType);
let alertType = ref(route.params.alertType);

watch(() => route.params, () => {
  // 修正：使用.value更新ref值
  dbName.value = route.params.dbName;
  dbMethod.value = route.params.dbMethod;
  securityType.value = route.params.securityType;
  alertType.value = route.params.alertType;
}, { deep: true }); // 添加deep监听，确保对象内部变化被捕获
</script>

解决BoardContainer生命周期不触发的问题 #

针对BoardContainer依赖onMounted但路由切换时未触发的问题，有两种常用解决方案：

方案1：通过key强制组件重建

给BoardContainer添加唯一key，当路由参数变化时，key值改变会触发组件卸载重建，自然触发onMounted：

<template>
  <div>
    <h1>DB: {{ dbName }}</h1>
    <BoardContainer
        :dbName="dbName"
        :dbMethod="dbMethod"
        :securityType="securityType"
        :alertType="alertType"
        <!-- 用参数组合生成唯一key -->
        :key="`${dbName}-${dbMethod}-${securityType}-${alertType}`"
    />
  </div>
</template>

方案2：重构BoardContainer监听props变化

如果不想重建组件，可将BoardContainer中onMounted的逻辑抽离为独立方法，监听props变化时重新执行：

<!-- BoardContainer.vue -->
<script setup>
import { onMounted, watch, defineProps } from 'vue';

const props = defineProps(['dbName', 'dbMethod', 'securityType', 'alertType']);

// 抽离初始化逻辑为独立方法
const initBoard = () => {
  // 原来onMounted中的代码，比如数据请求、视图初始化
  console.log('执行初始化/更新逻辑', props);
};

// 首次挂载执行
onMounted(initBoard);

// 监听props变化，触发更新
watch(props, initBoard, { deep: true });
</script>

两种方案对比：方案1简单直接，适合快速修复；方案2性能更优，适合复杂组件的长期维护。

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