解决 el-menu 刷新丢失选中状态

最新推荐文章于 2024-10-16 21:04:22 发布

原创最新推荐文章于 2024-10-16 21:04:22 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何在ElementUI框架中为垂直导航菜单设置激活状态。通过获取浏览器URL中的路由信息并将其设置为导航栏的活动路由，实现页面刷新时导航栏的正确选中状态。

<el-menu
              :default-active="activerouter"
              class="el-menu-vertical-demo"
              background-color="#13141f"
              text-color="#fff"
              active-text-color="#fff"
              router
              style="height:100%"
            >

activerouter : ’ ’

mounted() {
    // 页面手动刷新指定路由
    //获取地址栏中的路由，设置elementui中的导航栏选中状态
    let defaultMenu = window.location.hash.substr(
      window.location.hash.indexOf("/")
    );
    this.activerouter = defaultMenu;
  }