vue element NavMenu 导航菜单

今天给大家带来一个垂直的导航菜单：

点击左边的菜单栏，右边也跟着变。

上代码：这是.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