弄懂vue中的侧边栏渲染，看完我这一篇文章足矣。

相信很多小白对于项目初始阶段的搭建工作很是头痛，特别是菜单栏渲染这一块有较深的执念，别人写的看不懂，自己又不会写，今天这篇文章为大家带来最详细的新手关环，话不多说开始上内容，全程干货，记得点赞 + 关注


1、在渲染左侧菜单栏的时候，我们需要搞懂element-ui中的el-menu这个组件 
https://element.eleme.cn/#/zh-CN/component/menu

2、这一块我们一般是用 el-asid 进行左侧菜单栏的一个包裹，你可以理解为 一个左侧的div盒子没啥特别之处。

3、在往后我们常用到的标签是 el-menu  el-menu-item  el-submenu 这三兄弟，到这里或许就有人会迷惑他们三者的关系。其实并且不复杂

-   el-menu         简单理解为他是一个容器div
-   el-submenu      可以理解为他是用来存储二级标题的一个盒子，它可以用来包裹el-menu-item也同样可以继续包裹el-submenu，假如你的菜单栏有三级，四级依次类推 可以一直用来包裹
-   el-menu-item    可以理解为它就是一个弟弟标签，级别最低，一般用来处理一级菜单栏，或者多级菜单的最后一级别。话不多说上代码

结构部分：

 <el-aside width="200px">
       <el-menu @select="handleSelect" :default-active="this.$route.path"  :router="true" active-text-color="#fff" text-color="#000" background-color="#98c8ff">
            <!-- 用来渲染左侧菜单栏列表 -->
            <div v-for="(item,index) in menuList" :key="index">
              <!-- 当存在二级或者多级菜单时候 -->
              <div v-if="item.children">
                <!-- 
                  用到el-submenu 
                  特别注意：
                  ---index：一般是在el-menu-item 和el-submenu中的唯一标识，一般作用于路由中的路径跳转
                -->
                <el-submenu :index="item.path" :key="item.path">
                  <!-- 父项 -->
                  <template slot="title">
                    <span slot="title">{{ item.name }}</span>
                  </template>
                
                    <!-- 各级子项 展开后的标签内容 -->
                    <template v-for="subItem in item.children">
                      <el-menu-item :index="subItem.path" :key="subItem.path">{{ subItem.name }}</el-menu-item>
                    </template>
                </el-submenu>
              </div>

              <!-- 当没有二级或多级标签时，直接进行一级标签渲染 -->
              <div v-else>
                <el-menu-item :index="item.path" :key="item.path">
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </div>
           </div>
        </el-menu>
</el-aside>

数据部分：

  data() {
    return {
      menuList:[
          {id:'1',name:'首页',path:'/music',
        children:[
          {id:'1-1',name:'音乐',path:'/music'},
          {id:'1-2',name:'音乐列表',path:'/music/list'},
          {id:'1-3',name:'音乐详情',path:'/music/details'}
        ]},
          {id:'2',name:'食物',path:'/food'}
        ]
    };
  },

路由部分：

import Vue from 'vue'
import VueRouter from 'vue-router'

import music_index from '../views/music/index.vue'
import music_details from '../views/music/details.vue'
import music_list from '../views/music/list.vue'

import food from '../views/food/index.vue' 

 const routes = [
  // 音乐
  {
    path:'/music',
    name:'音乐首页',
    component:music_index,
  },
  {
    path:'/music/details',
    name:'音乐详情',
    component:music_details
  }
  ,{
    path:'/music/list',
    name:'音乐列表',
    component:music_list
  },
  // 食物
  {
    path:'/food',
    name:'食物',
    component:food
  }

对应的渲染页面

有些小伙伴可能看到这里会觉得奇怪，欸，你这路由下面都没有children，都没嵌套怎么能说是二级路由呢？其实是因为我这个页面直接用的app.vue第一次挂载的 router-view 中，一般来说，后天管理系统主页的页面是在/home的路由下，然后在router.js中有个/home的路由，这下面有个children的属性。写在这后面，因为我这个demo我就没写直接把原因写出来了。

哎，谁让我是保姆级教学呢，这里我也给大家标注上啦

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import music_index from '../views/music/index.vue'
import music_details from '../views/music/details.vue'
import music_list from '../views/music/list.vue'

import jaychou from '../views/music/list/jaychou.vue'
import jjlin from '../views/music/list/jjlin.vue'

import food from '../views/food/index.vue'


Vue.use(VueRouter)

const routes = [

  // 音乐
  {
    path:'/music',
    name:'音乐首页',
    component:music_index,
  },
  {
    path:'/music/list',
    name:'音乐列表',
    component:music_list,
    children:[{
      path:'/music/list/jaychou',
      name:'音乐首页',
      component:jaychou,
    },{
      path:'/music/list/jjlin',
      name:'音乐首页',
      component:jjlin,
    }]
  },

  
  {
    path:'details',
    name:'音乐详情',
    component:music_details
  },
  
  // 食物
  {
    path:'/food',
    name:'食物',
    component:food
  },
  
]

const router = new VueRouter({
  routes
})

export default router

list.vue

    <template>
    <div>
        <button @click="goto">进入杰伦主页</button>
        <button @click="gotoJJlin">进入俊杰主页</button>

        <!--  childern 下的路由挂载点 -->
        <router-view></router-view>
        
    </div>
</template>

<script>
export default {
    name: 'MenuList',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        goto(){
            this.$router.push('/music/list/jayChou')
        },
        gotoJJlin(){
            this.$router.push('/music/list/JJlin')
        }
    },
};
</script>

<style lang="scss" scoped>

</style>

现在你可以把/music/list理解为，后台主页中的/home页面，/music/list/jaychou 和 /music/list/jjlin 就是他们的二级路由。

效果展示

看到这里相信大家对于这一块有了一定的认知与了解，大家后续有什么不懂的欢迎在评论区留言，看到一定解答，也欢迎业界大佬，对我的文章做出指正，大家共同进步，共同成长，好啦，感谢大家的收看，如果觉得有帮到你，可以点赞加关注。谢谢啦(❁´◡`❁)😁