vue-pure-admin项目，参数设置为什么没有侧边栏

### Vue-Pure-Admin 中通过参数设置添加侧边栏显示的方法 在 Vue-Pure-Admin 项目中，可以通过多种方式来控制侧边栏的显示与隐藏以及动态调整其行为。以下是具体的实现方法： #### 1. 配置 `settings` 文件中的全局变量 Vue-Pure-Admin 提供了一个全局配置文件用于管理应用的行为和样式。通常位于 `src/settings/projectSetting.js` 或类似的路径下。 在这个文件中可以找到关于侧边栏的相关配置选项，例如： ```javascript // src/settings/projectSetting.js export default { menu: { isShowLogo: true, // 是否显示 Logo collapsed: false, // 菜单是否折叠，默认展开 split: false, // 是否开启菜单分组模式 accordion: true // 手风琴效果，只允许同时打开一个子菜单 }, layout: 'classic' // 页面布局风格 classic | transverse } ``` 上述代码片段展示了如何通过修改 `menu.collapsed` 和其他属性来影响侧边栏的状态[^1]。 #### 2. 动态加载路由并刷新侧边栏 如果需要动态添加新的路由到侧边栏，则需要注意路由表的变化不会自动同步至视图层。因此，在调用 `addRoutes()` 方法后，还需要手动触发侧边栏重新渲染逻辑。 具体操作如下所示： ```javascript import { resetRouter } from '@/router' function addDynamicRoute(routeConfig) { const router = useRouter() router.addRoute(routeConfig) // 刷新侧边栏数据源 store.dispatch('permission/setSidebarRouters', [...store.getters.routers, routeConfig]) // 如果当前页面未展示新路由对应的模块，需重载 Router View 组件 nextTick(() => { resetRouter() }) } ``` 此部分解决了类似于引用[2]提到的问题——即新增加的路由未能及时反映于前端界面之中[^2]。 #### 3. 自定义事件监听器处理点击动作 为了使每次选中某条目时能够传递额外的信息给父级组件或者执行特定业务逻辑，可以在 `<el-menu>` 的 `@select` 属性绑定自定义函数作为回调处理器。 下面是一个例子演示了当用户选择某个菜单项时会调用 `selectType` 函数并将该项名称发送出去： ```html <template> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" @select="handleSelect"> <!-- 更多配置 --> </el-menu> </el-scrollbar> </template> <script setup lang="ts"> const handleSelect = (index:string) => { console.log(`Selected item index: ${index}`) }; </script> ``` 这里实现了类似的功能描述见引用[3][^3]。 #### 4. 替换默认 LOGO 图像资源 最后一步涉及更改应用程序顶部导航区域所使用的图标素材。按照官方文档指引，只需替换指定目录下的 SVG 文件即可完成定制化需求。 假设我们希望把原有的 Vue 徽标替换成另一个品牌标志，那么只需要将准备好的图片保存为 `vuejs-fill.svg` 并上传覆盖原有位置 `/src/icons/svg/vuejs-fill.svg` 即可生效[^4]。 --- ### 总结 综上所述，针对 Vue-Pure-Admin 框架内的侧边栏相关设定主要围绕以下几个方面展开讨论：一是利用预设 JSON 对象调节整体外观特性；二是结合实际场景灵活运用编程技巧解决潜在的技术难题；三是借助插槽机制增强交互体验感；四是简单便捷地实施视觉层面的品牌统一工作流。