Vue项目如何让Login.vue独立显示，不加载导航栏/侧边栏组件

有两种常用方案可以实现登录页独立显示的需求，具体如下：

方案一：路由分层拆分（推荐） #

把带侧边栏、导航栏的布局抽成独立组件，通过路由配置区分登录页和其他页面的渲染层级：

1. 创建布局组件 Layout.vue
   把原来App.vue里的侧边栏、导航栏和主内容结构移到这个组件里：

<template>
  <main>
    <!--侧边栏-->
    <Sidebar />
    <!-- 主内容 -->
    <div class="main__content__wrapper">
      <!-- 顶部导航栏 -->
      <Topbar />
      <div class="main__body">
        <!-- 主体内容：渲染子路由页面 -->
        <RouterView/>
      </div>
    </div>
  </main>
</template>

<script setup>
import Sidebar from './Sidebar.vue'
import Topbar from './Topbar.vue'
</script>

2. 修改 App.vue
   只保留根级的RouterView，让路由来控制渲染布局还是登录页：

<template>
  <RouterView />
</template>

3. 配置路由文件（比如 router/index.js）
   将登录页作为独立路由项，其他页面嵌套在布局路由下：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Layout from '../components/Layout.vue'
import Dashboard from '../views/Dashboard.vue'
import Settings from '../views/Settings.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login // 登录页直接渲染，不经过Layout
  },
  {
    path: '/',
    component: Layout, // 其他页面先渲染Layout，再渲染子路由
    children: [
      { path: '', name: 'Dashboard', component: Dashboard },
      { path: '/settings', name: 'Settings', component: Settings }
    ]
  }
]

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

export default router

方案二：在 App.vue 中根据路由/登录状态判断渲染 #

如果不想改动路由结构，可以直接在App.vue里通过条件渲染控制布局组件的显示：

<template>
  <!-- 判断当前路由是否是登录页，或者用户未登录时只显示登录页 -->
  <div v-if="$route.path === '/login' || !isLoggedIn">
    <RouterView />
  </div>
  <main v-else>
    <Sidebar />
    <div class="main__content__wrapper">
      <Topbar />
      <div class="main__body">
        <RouterView/>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue'
import Sidebar from './Sidebar.vue'
import Topbar from './Topbar.vue'

// 这里用ref模拟登录状态，实际项目中可从状态管理库或本地存储获取
const isLoggedIn = ref(false)
</script>

两种方案里，方案一更符合路由设计的最佳实践，后续扩展页面时结构更清晰；方案二更适合小型项目或快速调整的场景。

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