vue菜单栏跳转方案

vue菜单栏跳转方案

 <template><div><el-container style="height: 100vh"><el-aside width="200px" style="background-color: #b3c0d1"><el-menu@open="handleOpen"@close="handleClose"@select="handleMenuSelect"><!-- 自服务功能模块 --><el-submenu index="0"><template slot="title"><i class="el-icon-s-promotion"></i>自服务</template><el-menu-item index="personal_info"><i class="el-icon-s-custom"></i> 个人信息</el-menu-item><el-menu-item index="modify_info"><i class="el-icon-s-tools"></i> 修改信息</el-menu-item><el-menu-item index="modify_password"><i class="el-icon-lock"></i> 修改密码</el-menu-item></el-submenu><!-- 卖家功能模块 --><el-submenu index="1"><template slot="title"><i class="el-icon-s-shop"></i>卖家功能</template><el-menu-item index="my_shop"><i class="el-icon-office-building"></i> 我的店铺</el-menu-item><el-menu-item index="shop_products"><i class="el-icon-s-goods"></i> 店铺商品</el-menu-item><el-menu-item index="shop_orders"><i class="el-icon-s-order"></i> 店铺订单</el-menu-item></el-submenu><!-- 管理员功能模块 --><el-submenu index="2"><template slot="title"><i class="el-icon-s-custom"></i>管理员功能</template><el-menu-item index="shop_management"><i class="el-icon-s-shop"></i> 店铺管理</el-menu-item><el-menu-item index="order_management"><i class="el-icon-s-order"></i> 订单管理</el-menu-item><el-menu-item index="data_report"><i class="el-icon-s-data"></i> 数据报表</el-menu-item><el-menu-item index="user_management"><i class="el-icon-user-solid"></i> 用户管理</el-menu-item><el-menu-item index="manager_management"><i class="el-icon-s-management"></i> 店长管理</el-menu-item><el-menu-item index="system_logs"><i class="el-icon-s-operation"></i> 管理系统日志</el-menu-item><el-menu-item index="category_management"><i class="el-icon-s-order"></i> 商品分类管理</el-menu-item><el-menu-item index="product_recommendation"><i class="el-icon-goods"></i> 商品推荐管理</el-menu-item><el-menu-item index="ranking_management"><i class="el-icon-scissors"></i> 排行榜管理</el-menu-item><el-menu-item index="advertisement_management"><i class="el-icon-reading"></i> 广告招商管理</el-menu-item><el-menu-item index="carousel_management"><i class="el-icon-picture"></i> 轮播图管理</el-menu-item><el-menu-item index="system_notice"><i class="el-icon-s-comment"></i> 系统公告</el-menu-item></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item @click.native="logout()">退出</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><router-view /></el-main></el-container></el-container></div>
</template><script>
export default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},handleMenuSelect(key, keyPath) {console.log(key);this.$router.push("/back_home/" + key);},logout() {this.$router.push("/back_login");},},
};
</script><style>
.el-header {background-color: #b3c0d1;line-height: 60px;
}.el-aside {
}
</style>