当前位置：首页 > news >正文

vue2侧边导航栏路由

news 2025/6/27 8:24:24

<template><div><!-- :default-active="$route.path" 和index对应其路径 --><el-menu:default-active="active"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"router:collapse="isCollapse"><el-menu-item><span slot="title">XX后台管理系统</span></el-menu-item><el-menu-item index="/"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-submenu index="/product"><template slot="title"><i class="el-icon-location"></i><span>产品管理</span></template><el-menu-item-group><el-menu-item index="/product/list"><i class="el-icon-location"></i><span> 产品列表</span></el-menu-item><el-menu-item index="/product/category"><i class="el-icon-location"></i><span> 产品分类</span></el-menu-item></el-menu-item-group><el-submenu index="/product/purchase"><template slot="title">产品采购</template><el-menu-item index="/product/purchase/scheme">采购营销</el-menu-item></el-submenu></el-submenu><el-submenu index="/order"><template slot="title"><i class="el-icon-location"></i><span>订单管理</span></template><el-menu-item-group><el-menu-item index="/order/orderlist"><i class="el-icon-location"></i><span>订单列表</span></el-menu-item><el-menu-item index="/order/summary"><i class="el-icon-location"></i><span>汇总清单</span></el-menu-item><el-menu-item index="/order/review"><i class="el-icon-location"></i><span>订单审核</span></el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">广告分类</span></el-menu-item><el-submenu index="/system"><template slot="title"><i class="el-icon-location"></i><span>系统管理</span></template><el-menu-item-group><el-menu-item index="/system/adminstartion"><i class="el-icon-location"></i><span>系统列表</span></el-menu-item></el-menu-item-group><el-menu-item-group><el-menu-item index="/system/settings"><i class="el-icon-location"></i><span>系统设置</span></el-menu-item></el-menu-item-group></el-submenu></el-menu></div>
</template>
<script>export default {props:['isCollapse'],data(){return{// isCollapse:false}},methods:{handle(){console.log(11111)}},computed:{active(){return this.$route.path}}}
</script><style scoped lang="less">.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}/deep/.el-menu-item-group__title{padding: 0;}
</style>