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

2019-06-05  本文已影响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)
    }
  }
上一篇 下一篇

猜你喜欢

热点阅读