美文网首页
vue + element-ui 制作导航菜单(可配置路由、可根

vue + element-ui 制作导航菜单(可配置路由、可根

作者: 刘其瑞 | 来源:发表于2019-06-05 10:26 被阅读0次

:default-active="$route.path.slice(1)" // 通过路径自动匹配导航(已截取首位字符‘/’)


image

<el-aside width="200px">
<!-- 通过路径自动匹配导航(已截取首位字符'/') -->
        <el-menu
          :default-active="$route.path.slice(1)"

          background-color="#545c64"

          text-color="#fff"

          active-text-color="#ffd04b"

          :unique-opened="true"

          :router="true"

        >

          <el-submenu :index="item.id+''" v-for="(item,k) in menusList" :key="item.id">

            <template slot="title">

              <i :class="'iconfont icon-'+menuicon[k]"></i>

              <span>{{item.authName}}</span>

            </template>

            <el-menu-item v-for="item2 in item.children" :index="item2.path" :key="item2.id">

              <i class="el-icon-menu"></i>

              <span>{{item2.authName}}</span>

            </el-menu-item>

          </el-submenu>

        </el-menu>

      </el-aside>

  data() {
    return {
      menusList: {},
      menuicon: ['users', 'tijikongjian', 'shangpin', 'danju', 'baobiao']
    }
  },
  created() {
    this.getmenus()
  },
  methods: {
    async getmenus() {
      const { data: res } = await this.$http.get('/menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menusList = res.data
      console.log(res.data)
    }
  }

相关文章

网友评论

      本文标题:vue + element-ui 制作导航菜单(可配置路由、可根

      本文链接:https://www.haomeiwen.com/subject/yypdxctx.html