今天给大家带来一个垂直的导航菜单:
点击左边的菜单栏,右边也跟着变。
上代码:这是.vue文件
<div class="hc_sidebar fl">
<el-menu :default-active="$route.path"
active-text-color="#fff000" router>
<el-submenu index="1" >
<template slot="title">
<i class="el-icon-location"></i>
<span>购物指南</span>
</template>
<el-menu-item index="/nav2/nav1">购物流程</el-menu-item>
<el-menu-item index="/nav2/nav2">常见问题</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-wallet"></i>
<span>支付方式</span>
</template>
<el-menu-item index="/nav2/nav1">
<template slot="title">积分支付</template>
</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-service"></i>
<span>售后服务</span>
</template>
<el-menu-item index="/nav2/nav1">
<template slot="title">换货流程</template>
</el-menu-item>
<el-menu-item>
<template slot="title">换货政策</template>
</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-s-promotion"></i>
<span>特色栏目</span>
</template>
<el-menu-item index="/nav2/nav1">
<template slot="title">高端专区</template>
</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-s-comment"></i>
<span>关于我们</span>
</template>
<el-menu-item index="/nav2/nav1">
<template slot="title">联系我们</template>
</el-menu-item >
<el-menu-item index="/nav2/nav1">
<template slot="title">意见建议</template>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
<router-view></router-view>
</div>
上路由route/index.js
{
path: '/goodsList/Goods_Index',
name: 'Goods_Index',
component: GoodsIndex,
meta:{
title:'商品中心'
}
},//商品中心页面
{
path: '/goodsList/Hot_Goods',
name: 'Hot_Goods',
component: HotGoods,
meta:{
title:'热门商品'
}
},//热门商品页面
{
path: '/goodsList/SecKill_Goods',
name: 'SecKill_Goods',
component: SecKillGoods,
meta:{
title:'秒杀商品'
}
},//秒杀商品页面
{
path: '/helpCenter/HelpCenter_Com',
name: 'HelpCenter_Com',
component: HelpCenterCom,
meta: {
requireAuth: true,
title: '订单中心'
},
children:[
{
path: '/helpCenter/Common_Problem',
name: 'Common_Problem',
component: CommonProblem,
},//帮助中心-常见问题
],
},//帮助中心-公共组件
上子路由.vue
<template>
<div class="hc_center fr">
<div class="hc_center_head">
常见问题
</div>
<div class="problem">
<div class="problem_center">
<div class="problem_center_f">
<span class="hc_span_two">积分消费</span>
</div>
<div class="problem_center_ts">
<div class="problem_center_s" v-for="item in problemdata" :key="item.id">
<div class="problems_one">
<span class="problems_span_f">{{item.index}}</span>
<span class="problems_span_s" v-html="item.PROBLEM_NAME"></span>
</div>
<div class="problems_two clr">
<div class="problems_span_ff">{{item.Capital}}</div>
<div class="problems_span_ss" v-html="item.PROBLEM_DESC"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
上面的栗子就可以实现,当点击左边的子菜单时,会把自己的子路由里的东西渲染到这个<router-view></router-view>中,
亲测可用,实现了一个模块的功能,用官方的文档纠结了小半天,hh