Vue3中如何指定Router-Link渲染到特定Router-View

核心是利用命名视图指定组件的渲染目标位置——默认的<RouterView>是匿名的，给它添加name属性后，就能在路由配置中精准绑定对应组件。

步骤1：给目标Router-View设置名称 #

在包含两个组件的父页面中，为需要渲染资源的<RouterView>添加自定义名称，比如resourceView：

<!-- 父页面组件 -->
<template>
  <div class="parent-page">
    <!-- 带上下文菜单的组件 -->
    <ContextMenu />
    <!-- 指定命名的RouterView，菜单点击的资源将渲染在这里 -->
    <RouterView name="resourceView" />
  </div>
</template>

步骤2：配置Vue Router路由规则 #

在路由配置里，使用components（复数形式，区别于单个组件的component）字段，将路由对应的组件与命名视图绑定。针对菜单跳转的场景，用嵌套路由更贴合逻辑：

import { createRouter, createWebHistory } from 'vue-router'
import ParentPage from '@/views/ParentPage.vue'
import ResourceA from '@/views/ResourceA.vue'
import ResourceB from '@/views/ResourceB.vue'

const routes = [
  {
    path: '/parent',
    // 父页面自身的组件（对应默认匿名RouterView）
    component: ParentPage,
    // 子路由对应菜单的各个选项
    children: [
      // 资源A的路由，绑定到resourceView视图
      {
        path: 'resource-a',
        components: {
          resourceView: ResourceA
        }
      },
      // 资源B的路由，绑定到resourceView视图
      {
        path: 'resource-b',
        components: {
          resourceView: ResourceB
        }
      },
      // 可选：进入父页面时默认渲染的资源
      {
        path: '',
        components: {
          resourceView: ResourceA
        }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

步骤3：上下文菜单中使用RouterLink跳转 #

在菜单组件里，用<RouterLink>指向对应的子路由路径，点击后路由匹配成功，对应组件就会自动渲染到指定命名的<RouterView>中：

<!-- 上下文菜单组件 -->
<template>
  <div class="context-menu">
    <RouterLink to="/parent/resource-a">打开资源A</RouterLink>
    <RouterLink to="/parent/resource-b">打开资源B</RouterLink>
  </div>
</template>

额外说明 #

• 如果你的场景不是嵌套路由，而是同级多视图，也可以直接在根路由中配置多个命名视图，键名对应页面中各个<RouterView>的name即可。
• 务必注意component（单数，对应匿名视图）和components（复数，对应命名视图）的区别，命名视图必须用复数形式配置。

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