热门标签
热门文章
- 1vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描
- 2【你也能从零基础学会网站开发】 SQL结构化查询语言应用基础--DDL篇--创建表约束(table Constraints) 之 NOT NULL约束、UNIQUE 约束、CHECK约束 的使用技巧!
- 3Python深度学习实践：自适应学习率调整技术_python自适应控制
- 4【Verilog-CBB】开发与验证（2）——单比特信号CDC同步器
- 5使用Token方式实现用户身份鉴权认证_token鉴权
- 69 个 Java 性能调优技巧，YYDS！
- 7Apache Flink-数据流之上的有状态的计算_有状态计算
- 8验收测试：α测试（Alpha 测试 ）、β测试（beta测试）_α测试 验收测试
- 9Autocad2013中文破解版（64位）安装图文教程_cad2013 64位
- 10234：vue+openlayers 加载本地shp数据，在map上显示图形_openlayers加载shp文件
当前位置: article > 正文
Vue学习记录09--侧边栏_vue侧边栏
作者：码创造者 | 2024-08-12 21:44:19
赞
踩
vue侧边栏
因为所有的界面都要用到，所以可以用components文件夹放公共组件
<template> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <span slot="title">分组一</span> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <span slot="title">选项4</span> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </template> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> <script> export default { data() { return { isCollapse: true }; }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
在home页面对当前页面进行引入、 在vue中引入。
按需引入
运行项目
在data中定义数据menu
menu:[ { path:'/', name:'home', label:'首页', icon:'s-home', url:'Home/home' }, { path:'/mall', name:'mall', label:'商品管理', icon:'video-play', url:'MallManage/MallManage' }, { path:'/user', name:'user', label:'用户管理', icon:'user', url:'UserManage/UserManage' }, { label:'其他', icon:'location', children:[ { path:'/page1', name:'page1', label:'页面1', icon:'setting', url:'Other/PageOne' }, { path:'/page2', name:'page2', label:'页面2', icon:'setting', url:'Other/PageTwo' } ] } ]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
计算属性：
!取反，返回有children节点的列表和没有节点的列表
渲染数据：
- 没有子项目的菜单：（一级菜单的展示）
- 有子项目的菜单：（二级菜单的展示）
侧边栏样式布局
- 标题颜色
- 背景颜色
- 高亮显示
贴边：
点击左侧menu进行路由跳转
添加点击事件
对首页的Home进行重命名
修改路由：
所有页面都可以继承Main页面下的顶栏、侧边栏
前面说可以通过name跳转，因为在路由里配置了name属性：
修改目录结构：
跳转失败时看一下那几个文件对应的name，要和data里的一样！
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/971724
推荐阅读
相关标签
