element el-menu选中后刷新页面 保持当前页选中状态且选中高亮

 一定要加上router属性，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，

default-active属性代表当前激活菜单的 index，所以想让哪个页面作为项目一进来的首页，就写哪个页面的路径

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router
      background-color="#666666" text-color="#fff" active-text-color="#fff">
      <el-menu-item index="/user/userList">运营中心</el-menu-item>
      <el-menu-item index="/user/userDetails">行业宝</el-menu-item>
      <el-menu-item index="/user/applicationList">企业宝</el-menu-item>
    </el-menu>

 

data() {
    return {
      activeIndex: '/user/userList',
    };
  },
  mounted() {
    this.activeIndex = this.$route.path
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },

项目的需求是要有选中的背景色且去掉下边框

.el-menu-item.is-active {
  background-color: #333333 !important;
  border-bottom: 0;
}

.el-menu-item {
  border-bottom: 0;
}

这是我的项目图