vue+elementui左侧导航栏踩坑
最近接触前端vue+elementui,记录一下
1、
element官网这里:default-active="***"前面没有冒号，直接将路由地址写上没问题，但是动态变量赋值的形式需要加上冒号，否则不生效
2、
顶级菜单和子菜单默认展开，关闭展开折叠、隐藏折叠展开小箭头

 <el-menu router
                 ref="menus"
                 @open="handleOpen"
                 @close="handleClose"
          :default-active="activPath" //activPath是我自己定义的变量，其他不同页面跳转过来的路由地址
          class="el-menu-vertical-demo"
          text-color="#303133"
          active-text-color="#409EFF"
                 :default-openeds="['1','2','3']" // 默认展开index为1、2、3的菜单，我这里展开的是父级菜单
         >
          <el-submenu index="1" >
            <template slot="title" >
              <span style="font-weight: bold">账户设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/bas****seInfo">
                <span slot="title">基本信息</span>
              </el-menu-item>

              <el-menu-item index="/enterp*****rtification" >
                <span slot="title">企业认证</span>
              </el-menu-item>
              <el-menu-item index="/acc***ity">
                <span slot="title">账户安全</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" >
            <template slot="title">
              <span style="font-weight: bold">我的订阅</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" >
                <span slot="title" >短信订阅</span>
              </el-menu-item>

              <el-menu-item index="2-2" >
                <span slot="title">邮件订阅</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" >
            <template slot="title">
              <span style="font-weight: bold">系统日志</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" >
                <span slot="title" >登录日志</span>
              </el-menu-item>
              <el-menu-item index="3-2" >
                <span slot="title">操作日志</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

关闭折叠展开方法

  methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
            this.$refs.menus.open(keyPath);
          },
          handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath);
          },
      },

隐藏折叠隐藏小箭头

<style >
/*禁用左侧导航栏折叠箭头样式*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
  display: none;

}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
  display: none;

}

</style>

右侧对应路由页面主体内容显示

      <el-main>
        <!-- 主体内容 -->
        <router-view></router-view>
      </el-main>