el-menu页面刷新高亮不刷新

如果您使用的是 Element UI 的 el-menu 组件，在页面刷新时高亮状态不会被保留。这是因为页面刷新后，Vue 组件会被重新渲染，组件的状态会被重置。

为了解决这个问题，您可以在组件的 mounted 钩子函数中获取当前页面的路由信息，然后设置 el-menu 的当前选中项。

具体操作步骤如下：

1. 导入 Vue Router 和 Element UI 组件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Menu, Submenu, MenuItem } from 'element-ui'

2. 注册 Vue Router 和 Element UI 组件。

Vue.use(VueRouter)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)

3. 在组件的 mounted 钩子函数中获取当前页面的路由信息，并设置 el-menu 的当前选中项。

mounted() {
  // 获取当前路由信息
  const currentPath = this.$route.path

  // 设置 el-menu 的当前选中项
  const menu = this.$refs.menu
  const activeItem = menu.$el.querySelector(`.el-menu-item[data-path="${currentPath}"]`)
  if (activeItem) {
    menu.setCurrentIndex(activeItem.getAttribute('data-index'))
  }
}

4. 在 el-menu 中设置 data-path 属性，用于在 mounted 钩子函数中获取当前页面的路由信息。

<el-menu ref="menu">
  <el-menu-item index="1" data-path="/home">首页</el-menu-item>
  <el-menu-item index="2" data-path="/about">关于我们</el-menu-item>
  <el-menu-item index="3" data-path="/contact">联系我们</el-menu-item>
</el-menu>

这样，当页面刷新时，el-menu 组件会自动设置当前选中项，保持高亮状态不变。