vue-admin-template 删除侧边栏

最新推荐文章于 2023-07-25 09:38:46 发布

原创最新推荐文章于 2023-07-25 09:38:46 发布

· 2.1k 阅读

12 ·

版权

Python 专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了如何在Vue Admin Template中删除不需要的侧边栏和导航栏上的按钮。通过修改`sidebar.scss`文件，将隐藏侧边栏的宽度设置为0，并调整主容器的外边距。同时，从`index.vue`和`Navbar.vue`中移除了显示侧边栏按钮的代码，以实现首页上按钮的删除。在`app.js`中进一步修改以防止登录后侧边栏重新出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【问题】就想用vue-admin-template的单一网页，去除不需要的侧边栏，还有导航栏上调出侧边栏的按钮

【解决办法】原图

文件目录vue-admin-template-master/style/sidebar.scss中修改如下，

原
  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }

    .main-container {
      margin-left: 54px;
    }

修改后
  .hideSidebar {
    .sidebar-container {
      width: 0px !important;
    }

    .main-container {
      margin-left: 0px;
    }

修改后图：

另外，首页左边的按钮也需要去掉，这个在layout里面去找，现在index.vue删除<navbar />后发现首页导航栏都被删除了，所以再去Navbar.vue里面去找布局在左上的代码并删除

//原
<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">


//修改后    就是删除前面两行
<template>
  <div class="navbar">

    <div class="right-menu">

结果如图

store/modules/app.js

额。。。重启后登录sidebar又死灰复燃了，在以上的基础上，修改如下，定位到src/layout/index.vue

#原代码
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <app-main />
    </div>
  </div>

#删除后如下
  <div :class="classObj" class="app-wrapper">
    <div>
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <app-main />
    </div>
  </div>