Nuxt3中如何在index.vue内渲染out[id].vue？能否嵌套非子页面？

一、在index.vue内渲染out[id].vue #

你的页面结构下，out[id].vue是section目录的子路由，默认路径为/section/out/:id。要在index.vue侧边菜单旁渲染该页面内容，直接用Nuxt3内置的<NuxtPage>组件即可实现嵌套：

1. 配置侧边菜单路由跳转
   在index.vue的侧边菜单中，用<NuxtLink>指向对应id的子路由：

   <template>
     <aside class="sidebar">
       <NuxtLink 
         v-for="item in menuList" 
         :key="item.id" 
         :to="`/section/out/${item.id}`"
         :class="{ active: $route.params.id === item.id.toString() }"
       >
         {{ item.title }}
       </NuxtLink>
     </aside>
   </template>
   
   <script setup>
   // 示例菜单数据
   const menuList = [
     { id: 1, title: '内容1' },
     { id: 2, title: '内容2' }
   ]
   </script>
   

2. 添加子页面渲染区域
   在index.vue的主内容区插入<NuxtPage>，它会自动匹配当前路由对应的子页面并渲染：

   <template>
     <div class="section-layout">
       <!-- 侧边菜单 -->
       <aside class="sidebar">...</aside>
       <!-- 子页面渲染容器 -->
       <main class="content">
         <NuxtPage />
       </main>
     </div>
   </template>
   

3. 在out[id].vue中获取id参数
   通过useRoute()钩子获取路由中的id参数：

   <script setup>
   const route = useRoute()
   const contentId = route.params.id // 拿到当前菜单对应的id
   </script>
   

访问/section/out/1时，index.vue的侧边栏保持显示，主内容区会渲染out[id].vue的内容，完全符合嵌套需求。

二、能否嵌套非子页面？ #

可以，两种方案任选：

方案1：自定义路由配置 #

在nuxt.config.ts中修改路由规则，把非子页面挂载到section路由下，让<NuxtPage>能匹配到它：

export default defineNuxtConfig({
  router: {
    routes: (defaultRoutes) => {
      // 找到section的父路由，添加自定义子路由
      const sectionRoute = defaultRoutes.find(r => r.path === '/section')
      if (sectionRoute) {
        sectionRoute.children.push({
          path: 'custom-page', // 自定义子路径
          component: () => import('~/pages/custom-page.vue') // 非子页面组件路径
        })
      }
      return defaultRoutes
    }
  }
})

之后访问/section/custom-page，index.vue的<NuxtPage>就会渲染custom-page.vue的内容。

方案2：动态组件渲染 #

不需要修改全局路由，直接在index.vue中根据路由条件动态引入并渲染非子页面：

<template>
  <div class="section-layout">
    <aside class="sidebar">
      <!-- 菜单添加非子页面的跳转链接 -->
      <NuxtLink to="/section/custom">自定义页面</NuxtLink>
    </aside>
    <main class="content">
      <!-- 渲染原有子路由页面 -->
      <NuxtPage v-if="$route.path.includes('/out/')" />
      <!-- 动态渲染非子页面 -->
      <component :is="currentPage" v-else />
    </main>
  </div>
</template>

<script setup>
import CustomPage from '~/pages/custom-page.vue'
const route = useRoute()

const currentPage = computed(() => {
  if (route.path === '/section/custom') {
    return CustomPage
  }
  // 可添加更多非子页面的判断逻辑
  return null
})
</script>

这种方式更灵活，适合需要按需渲染不同页面的场景。

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