Vue Router多页面项目结构与嵌套路由实现咨询

一、项目结构合理性分析 #

两种结构各有适用场景，核心区分点在于About/Contact是否是独立路由页面：

1. 你当前的结构（Views放Login/Home，Home下components放About/Contact）：

   • 适用场景：About/Contact只是HomeView内的局部组件，不需要通过独立路由访问，仅在Home内部切换显示。
   • 缺点：如果需要通过路由直接访问（比如输入/home/about），这种结构不符合“Views对应路由页面”的常规约定，后续维护扩展性差。

2. Components放HomePage、Views放About/Contact的结构：

   • 逻辑存在问题：Home是包含全局布局的顶层路由页面，属于路由级视图，应该放在Views目录；About/Contact作为嵌套在Home布局下的路由页面，同样属于Views范畴，而非通用组件目录。

推荐规范结构：

src/
├─ views/
│  ├─ LoginView.vue
│  ├─ HomeView.vue
│  ├─ home/          // 存放Home的子路由页面，结构清晰
│  │  ├─ AboutView.vue
│  │  └─ ContactView.vue
├─ components/       // 存放通用可复用组件（如按钮、表单组件等）
└─ router/
   └─ index.ts

理由：Views目录专门存放对应路由的页面级组件，Home作为顶层路由视图，其子路由页面放在Home子目录下，完全符合Vue项目的通用约定，便于后续迭代维护。

二、实现About/Contact在HomeView中展示（不重复布局） #

通过Vue Router嵌套路由实现，让HomeView作为父路由的布局容器，About/Contact作为子路由组件渲染在HomeView的<RouterView>中，具体步骤如下：

1. 修改路由配置（router/index.ts） #

将About/Contact设为Home的子路由，调整路径与组件引入：

import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'login',
      component: LoginView
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/HomeView.vue'),
      // 配置子路由，继承父路由布局
      children: [
        // 默认子路由：访问/home时自动渲染AboutView
        {
          path: '',
          name: 'home-about',
          component: () => import('../views/home/AboutView.vue')
        },
        {
          path: 'about',
          name: 'about',
          component: () => import('../views/home/AboutView.vue')
        },
        {
          path: 'contact_me',
          name: 'contactMe',
          component: () => import('../views/home/ContactView.vue')
        }
      ]
    }
  ]
})

export default router

2. 调整HomeView中的路由链接 #

将导航链接改为子路由路径，同时修复DOM结构问题（不要嵌套<body>标签）：

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="h-screen bg-woodsmoke-950">
    <header class="flex justify-between h-max bg-black">
      <RouterLink to="/home" class="flex justify-start items-center text-7xl text-vred-900 font-arial font-bold border-r-4 border-vred-950 my-1 ml-7 pr-3">
        Title
      </RouterLink>

      <div class="flex justify-end items-center my-1 mr-7 gap-4">
        <RouterLink to="/home/about" class="text-md text-vred-400 font-arial font-bold bg-vred-950 rounded-xl p-1">About</RouterLink>
        <RouterLink to="/home/contact_me" class="text-md text-vred-400 font-arial font-bold bg-vred-950 rounded-xl p-1">Contact Me</RouterLink>
      </div>
    </header>

    <main>
      <RouterView></RouterView> <!-- 子路由组件将渲染在此处 -->
    </main>
  </div>
</template>

注意：Vue组件的template中不要嵌套<body>标签，所有组件最终都会挂载到页面原生<body>内，重复嵌套会导致DOM结构异常，改用<div>作为根元素即可。

3. 调整组件文件位置 #

按照推荐结构，将原About.vue、ContactMe.vue移动到views/home/目录下，并重命名为AboutView.vue、ContactView.vue，符合Views目录的命名规范。

完成以上修改后，访问/home会默认显示About页面，点击导航链接会在Home的布局内切换About和Contact内容，无需重复编写Home的头部布局。

内容的提问来源于stack exchange，提问作者C.NCB