vue + element-ui 制作导航菜单（可配置路由、可根据路由高亮list、可刷新自动展开定位路由，自定义icon）

: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)
    }
  }