Element?el-menu中的NavMenu怎么使用

本篇內容介紹了“Element el-menu中的NavMenu怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

需求：

如果根據官網的示例，每個el-menu-item的index都為’1-1’ '1-2’之類的。如果直接跳轉路由，你會發現導航欄當前激活菜單的 index沒有改變。點擊跳轉。但菜單欄依舊停留在分組這個欄目

只有兩種方法可以解決這個問題：

• 通過子組件的this.$emit方法觸發父組件綁定的事件，改變default-active屬性值

• 通過vuex儲存el-menu的default-active屬性值，在子組件的點擊事件改變這個屬性值

但是我試了第一種方法，沒有生效?？赡苄枰獁atch這個變量才能響應。這兩種方法可能比較麻煩，后來發現一個很有效的方法。廢話不多說。代碼如下

正確用法：

<el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        router
        overflow-y:
        scroll
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">賬號管理</span>
          </template>
          <el-menu-item index="/demo/index">列表</el-menu-item>
          <el-menu-item index="/demo/group/index">分組</el-menu-item>
        </el-submenu>
</el-menu>

“Element el-menu中的NavMenu怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！