vue web端页面组件展示

有一部分页面没有左侧菜单，顶部导航几乎所有页面都有，特殊的搜索页面，登录页是独立的，

一、最终实现思路（非常重要）

我们把页面分成 3 类布局：

1. **公共布局（最常用）**顶部导航 + 内容区（无左侧菜单）
2. **侧边布局（需要左侧菜单）**顶部导航 + 左侧菜单 + 内容区
3. **独立布局（登录、搜索）**纯页面，没有任何公共头部、侧边

---

二、项目结构（最标准）

plaintext

src/
├── layout/
│   ├── PublicLayout.vue   // 公共布局：只有顶部
│   ├── SideLayout.vue     // 侧边布局：顶部 + 左侧菜单
│   └── Header.vue          // 公共顶部导航
├── views/
│   ├── login/Login.vue
│   ├── search/SearchPage.vue
│   ├── dashboard/Workbench.vue
│   ├── system/UserList.vue
│   └── info/NewsList.vue
└── router/index.js

---

三、直接可用的代码

1. router/index.js（核心！）

javascript

运行

import { createRouter, createWebHistory } from 'vue-router'

// 布局
import PublicLayout from '@/layout/PublicLayout.vue'
import SideLayout from '@/layout/SideLayout.vue'

const routes = [
  // ======================================
  // 1. 独立页面（无任何头部、侧边）
  // ======================================
  {
    path: '/login',
    component: () => import('@/views/login/Login.vue'),
    meta: { hidden: true }
  },
  {
    path: '/search',
    component: () => import('@/views/search/SearchPage.vue'),
    meta: { hidden: true }
  },

  // ======================================
  // 2. 公共布局（只有顶部，无左侧菜单）
  // ======================================
  {
    path: '/',
    component: PublicLayout,
    children: [
      {
        path: '',
        component: () => import('@/views/dashboard/Workbench.vue')
      },
      {
        path: 'info/news',
        component: () => import('@/views/info/NewsList.vue')
      }
    ]
  },

  // ======================================
  // 3. 侧边布局（顶部 + 左侧菜单）
  // ======================================
  {
    path: '/system',
    component: SideLayout,
    children: [
      {
        path: 'user',
        component: () => import('@/views/system/UserList.vue')
      },
      {
        path: 'role',
        component: () => import('@/views/system/RoleList.vue')
      }
    ]
  }
]

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

export default router

---

2. Header.vue（公共顶部，所有布局共用）

vue

<template>
  <div class="header">顶部导航</div>
</template>

<style scoped>
.header {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
</style>

---

3. PublicLayout.vue（公共布局：顶部 + 内容）

vue

<template>
  <div class="public-layout">
    <Header />
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import Header from './Header.vue'
</script>

<style scoped>
.public-layout {
  height: 100vh;
}
.container {
  padding: 20px;
}
</style>

---

4. SideLayout.vue（侧边布局：顶部 + 左侧菜单 + 内容）

vue

<template>
  <div class="side-layout">
    <Header />

    <div class="body">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <el-menu router>
          <el-menu-item index="/system/user">用户管理</el-menu-item>
          <el-menu-item index="/system/role">角色管理</el-menu-item>
        </el-menu>
      </div>

      <!-- 内容区 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from './Header.vue'
</script>

<style scoped>
.side-layout {
  height: 100vh;
}
.body {
  display: flex;
  height: calc(100vh - 60px);
}
.sidebar {
  width: 200px;
  border-right: 1px solid #eee;
}
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>

---

四、完美满足你的需求

1. 独立页面（登录、搜索）

• /login
• /search完全独立，没有顶部、没有侧边栏

2. 大部分页面（只有顶部，无左侧菜单）

• /
• /info/news有顶部导航，没有左侧菜单

3. 部分页面（顶部 + 左侧菜单）

• /system/user
• /system/role有顶部 + 左侧菜单