如何通过router-link跳转到多组件路由的指定组件？

首先纠正你当前路由配置的错误：components字段的写法不符合Vue Router规范，每个组件必须对应一个命名视图键名，不能直接罗列组件。比如正确的多命名视图配置需要给每个组件分配唯一key：

const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "home",
        component: HomeView,
    },
    {
        path: "/configuracion",
        name: "configuracion",
        components: {
            default: DatosClienteView,
            gestionUsuarios: GestionUsuarios,
            notificaciones: Notificaciones,
            selectorClientes: SelectorClientes,
        },
        meta: { /* 原有meta内容保持不变 */ }
    },
];

但多命名视图是同时渲染多个组件（比如页面不同区域显示不同内容），你的需求是跳转到/configuracion后仅显示指定组件，更适合以下两种方案：

方案1：嵌套子路由（推荐） #

这是Vue Router处理这类场景的标准方式，将/configuracion作为父路由（提供侧边栏等布局），每个功能组件作为子路由：

调整路由配置 #

const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "home",
        component: HomeView,
    },
    {
        path: "/configuracion",
        name: "configuracion",
        // 父组件：包含侧边栏和<router-view>用于渲染子组件
        component: ConfiguracionLayout,
        children: [
            {
                path: "", // 默认子路由，访问/configuracion时显示
                name: "configuracion-cliente",
                component: DatosClienteView,
            },
            {
                path: "gestiones",
                name: "configuracion-gestiones",
                component: GestionUsuarios,
            },
            {
                path: "notificaciones",
                name: "configuracion-notificaciones",
                component: Notificaciones,
            },
            {
                path: "selector-cliente",
                name: "configuracion-selector",
                component: SelectorClientes,
            },
        ],
        meta: { /* 原有meta内容保持不变 */ }
    },
];

跳转写法 #

直接使用子路由的name或path：

<!-- 通过路由name跳转 -->
<router-link :to="{ name: 'configuracion-notificaciones' }">
  <p>跳转到通知设置</p>
</router-link>

<!-- 或者通过path跳转 -->
<router-link to="/configuracion/notificaciones">
  <p>跳转到通知设置</p>
</router-link>

方案2：查询参数控制组件显示（适合不修改路由结构的场景） #

通过query参数传递要激活的组件名，在父组件中根据参数控制组件显示：

跳转写法 #

<router-link :to="{ name: 'configuracion', query: { activeComponent: 'Notificaciones' } }">
  <p>跳转到通知设置</p>
</router-link>

父组件内控制显示 #

在/configuracion对应的父组件中监听路由参数：

<template>
  <div>
    <!-- 侧边栏菜单 -->
    <div class="sidebar">...</div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <DatosClienteView v-if="activeComponent === 'DatosClienteView' || !activeComponent" />
      <GestionUsuarios v-if="activeComponent === 'GestionUsuarios'" />
      <Notificaciones v-if="activeComponent === 'Notificaciones'" />
      <SelectorClientes v-if="activeComponent === 'SelectorClientes'" />
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const activeComponent = route.query.activeComponent;
</script>

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