Vue.js 3如何让登录页面脱离布局，不显示侧边栏与头部？

方案一：路由嵌套（推荐） #

通过路由嵌套结构，让登录页独立渲染，需要布局的页面嵌套在Layout组件下，更符合Vue Router的设计逻辑。

1. 调整 router/index.js #

修改路由配置，将需Layout的页面设为Layout的子路由：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login // 登录页无需嵌套Layout，直接渲染
    },
    {
      path: '/',
      component: Layout, // 父路由挂载Layout
      children: [
        {
          path: 'dashboard',
          name: 'dashboard',
          component: () => import('../views/DashBoard.vue') // 子路由内容将渲染在Layout内部
        }
        // 其他需要Layout的页面都可添加到children数组中
      ]
    }
  ]
})

export default router

2. 更新 Layout.vue #

确保Layout组件内包含<router-view>，用于渲染子路由的页面内容：

<template>
  <div class="layout-container">
    <!-- 你的侧边栏组件 -->
    <aside class="sidebar">侧边栏内容</aside>
    <!-- 你的头部组件 -->
    <header class="header">头部内容</header>
    <!-- 子路由页面会渲染在此处 -->
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

3. 简化 App.vue #

App.vue只需保留根<router-view>，路由会自动根据配置决定是否渲染Layout：

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

方案二：路由元信息控制 #

若不想调整路由结构，可通过路由元信息标记是否需要渲染Layout，在App.vue中做条件判断。

1. 修改 router/index.js #

给路由添加meta字段标记是否需要Layout：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: { requiresLayout: false } // 登录页不需要Layout
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: () => import('../views/DashBoard.vue'),
      meta: { requiresLayout: true } // 仪表盘需要Layout
    }
  ]
})

export default router

2. 更新 App.vue #

通过当前路由的元信息控制Layout的显示：

<script setup>
import { RouterView, useRoute } from 'vue-router'
import Layout from './components/Layouts/Layout.vue'
const route = useRoute()
</script>

<template>
  <div id="app">
    <!-- 仅当路由标记需要Layout时才渲染 -->
    <Layout v-if="route.meta.requiresLayout" />
    <RouterView />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    Layout
  }
}
</script>

内容的提问来源于stack exchange，提问作者Malik Zubair Mukhtar