vue2侧边导航栏路由

<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>

总的vue中引入侧边栏的组件：

原文地址：https://blog.csdn.net/qq_48435896/article/details/143890177

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！