Vue中如何让指定组件不加载全局复用的侧边栏与导航栏？

这是个非常典型的Vue路由布局场景，我平时做项目也经常遇到类似需求，给你分享几个实用的解决方案，你可以根据项目的实际情况来选：

方案一：利用路由元信息（Route Meta） #

这是我最常用的方案，灵活性很高，适合大部分场景。核心思路是在路由配置里给需要显示侧边栏/导航栏的页面标记元信息，然后在App.vue里根据当前路由的元信息来控制布局组件的显示隐藏。

步骤1：配置路由元信息 #

在你的路由配置文件（比如router/index.js）里，给需要布局的路由添加meta字段：

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { showLayout: true } // 标记需要显示布局
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
    // 不添加meta字段，默认不显示布局
  },
  // 其他需要布局的路由同理添加meta
]

步骤2：在App.vue中根据元信息控制显示 #

修改App.vue的模板，用v-if判断当前路由的meta.showLayout值：

<template>
  <div id="app">
    <!-- 只有当路由meta标记需要显示时，才渲染侧边栏和导航栏 -->
    <sidebar v-if="$route.meta.showLayout"></sidebar>
    <navbar v-if="$route.meta.showLayout"></navbar>
    
    <router-view></router-view>
  </div>
</template>

如果大部分页面都需要布局，也可以把逻辑改成v-if="$route.meta.showLayout !== false"，这样只给少数不需要的页面标记meta: { showLayout: false }即可。

方案二：使用嵌套路由（Nested Routes） #

如果你的项目布局区分很清晰（比如一类页面都需要布局，另一类完全不需要），用嵌套路由会让结构更清晰。核心是把需要布局的页面放在一个父路由下，父路由的组件包含侧边栏、导航栏和子路由的出口。

步骤1：创建布局组件 #

先新建一个Layout.vue组件，包含侧边栏、导航栏和子路由视图：

<template>
  <div class="layout">
    <sidebar></sidebar>
    <navbar></navbar>
    <router-view></router-view> <!-- 子路由的内容会渲染在这里 -->
  </div>
</template>

步骤2：配置嵌套路由 #

在路由配置文件里，把需要布局的页面作为父路由的子路由，不需要布局的页面作为一级路由：

const routes = [
  {
    path: '/',
    component: () => import('../components/Layout.vue'),
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('../views/Dashboard.vue')
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('../views/Profile.vue')
      }
      // 其他需要布局的页面都放在children里
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

步骤3：修改App.vue #

此时App.vue只需要保留最外层的router-view即可：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

这样，访问/dashboard时会先渲染Layout.vue，再把Dashboard.vue渲染到布局的子路由视图里；访问/login时直接渲染Login.vue，不会包含布局组件。

方案三：组件内直接判断路由（适合简单场景） #

如果只是少数页面不需要布局，也可以在App.vue里直接判断当前路由的路径或名称来控制显示：

<template>
  <div id="app">
    <sidebar v-if="!['Login', 'NotFound'].includes($route.name)"></sidebar>
    <navbar v-if="!['Login', 'NotFound'].includes($route.name)"></navbar>
    
    <router-view></router-view>
  </div>
</template>

这个方法简单直接，但如果不需要布局的页面变多，代码会越来越臃肿，所以只适合临时或简单的场景。

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