Vue.js 3.2动态组件切换失效问题求助

问题根源 #

同一路由下参数（route.params.current）变化时，Vue Router不会重新挂载当前页面组件，导致动态组件无法自动更新；同时直接在:is中调用import()无法正确响应参数变化，组件实例不会重新创建。

解决方案 #

方案1：给动态组件添加唯一Key（最简单） #

给<component>标签绑定key属性，值设为route.params.current。当参数变化时，key改变会强制Vue销毁旧组件实例并创建新的，从而加载目标组件。

修改模板中的动态组件部分：

<component :is="getComponent(route.params.current)" :key="route.params.current"></component>

方案2：用响应式变量+监听路由参数（更可控） #

通过监听路由参数变化，手动加载并更新组件引用，确保组件能正确响应参数变更。

修改<script setup>部分：

import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { ref, watch } from 'vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

const currentComponent = ref(null);

// 监听路由参数变化，加载对应组件
watch(() => route.params.current, async (newComponentName) => {
  // 加载组件并取默认导出
  const componentModule = await import(`./Settings/${newComponentName}.vue`);
  currentComponent.value = componentModule.default;
}, { 
  immediate: true, // 页面初始化时立即执行一次
  deep: true 
});

const links = [
  { label: "account", icon: "person" },
  { label: "gameBehavior", icon: "sports_esports" }
];

然后修改模板中的动态组件：

<component :is="currentComponent"></component>

额外检查项 #

• 确认./Settings/${name}.vue路径正确，组件文件存在且使用export default导出组件
• 路由配置中settings路由需正确定义参数，示例如下：

// 路由配置示例
{
  path: '/settings/:current',
  name: 'settings',
  component: () => import('./path/to/your/page-component.vue')
}

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