在Nuxt应用中，能否借助<NuxtPage>实现类Vue Router命名视图的双路由视图？

Nuxt默认自动生成约定式路由，但依然可以实现类似Vue Router命名视图的效果，下面提供两种实用方案：

方案一：自定义路由配置（支持命名视图） #

你可以通过扩展Nuxt的路由配置，手动给指定路由添加命名视图组件，步骤如下：

1. 在项目根目录创建app/router.options.ts（Nuxt 3），添加自定义路由规则：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (_routes) => [
    // 保留Nuxt自动生成的路由
    ..._routes,
    // 给需要双视图的路由配置命名组件
    {
      path: '/dashboard',
      components: {
        default: () => import('~/pages/dashboard/index.vue'), // 主内容区视图
        rightSidebar: () => import('~/components/DashboardSidebar.vue') // 侧边栏视图
      }
    },
    {
      path: '/posts',
      components: {
        default: () => import('~/pages/posts/index.vue'),
        rightSidebar: () => import('~/components/PostsSidebar.vue')
      }
    }
  ]
}

2. 在你的布局文件（如layouts/default.vue）中，分别渲染两个视图：

<template>
  <div class="flex">
    <main class="w-3/4">
      <NuxtPage /> <!-- 渲染default视图 -->
    </main>
    <aside class="w-1/4">
      <NuxtPage name="rightSidebar" /> <!-- 渲染命名为rightSidebar的视图 -->
    </aside>
  </div>
</template>

方案二：基于路由动态加载组件（无需修改路由） #

如果不想手动维护路由配置，更贴合Nuxt约定式路由的方式是：在布局中根据当前路由动态切换侧边栏组件，示例如下：
在layouts/default.vue中：

<template>
  <div class="flex">
    <!-- 主内容区 -->
    <main class="w-3/4">
      <NuxtPage />
    </main>
    <!-- 动态侧边栏 -->
    <aside class="w-1/4">
      <component :is="currentSidebar" />
    </aside>
  </div>
</template>

<script setup>
const route = useRoute()

// 根据当前路由映射对应的侧边栏组件
const currentSidebar = computed(() => {
  const sidebarMap = {
    '/dashboard': () => import('~/components/DashboardSidebar.vue'),
    '/posts': () => import('~/components/PostsSidebar.vue'),
    '/profile': () => import('~/components/ProfileSidebar.vue')
  }
  // 匹配不到时使用默认侧边栏
  return sidebarMap[route.path] || () => import('~/components/DefaultSidebar.vue')
})
</script>

这种方式完全遵循Nuxt的路由约定，通过计算属性监听路由变化，自动切换侧边栏组件，实现和命名视图一致的效果。

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