使用element-ui的el-menu导航选中后刷新页面保持当前选中
时间: 2023-08-14 07:05:22 浏览: 49
好的,您可以使用 Vue Router 的 `keep-alive` 功能来实现这个效果,同时需要结合 `el-menu` 的 `default-active` 属性。
具体实现步骤如下:
1. 在 `router-view` 标签外添加 `keep-alive` 标签,如下所示:
```html
<template>
<div>
<el-menu :default-active="$route.path" @select="$handleMenuSelect">
<!-- 菜单项略 -->
</el-menu>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
```
2. 在 `el-menu` 标签中添加 `@select` 事件监听器,用于更新当前选中的菜单项:
```html
<el-menu :default-active="$route.path" @select="$handleMenuSelect">
<!-- 菜单项略 -->
</el-menu>
```
```javascript
export default {
methods: {
$handleMenuSelect(index) {
// 使用 Vuex 存储当前选中的菜单项
this.$store.commit('setActiveMenu', index);
},
},
};
```
3. 使用 Vuex 存储当前选中的菜单项,并在 `created` 钩子函数中读取该值,更新 `el-menu` 的 `default-active` 属性:
```javascript
export default {
created() {
// 从 Vuex 获取当前选中的菜单项
const activeMenu = this.$store.state.activeMenu;
if (activeMenu) {
// 更新 el-menu 的 default-active 属性
this.$refs.menu.defaultActive = activeMenu;
}
},
};
```
4. 在 Vuex 中定义 `activeMenu` 状态,并提供 `setActiveMenu` mutation 方法:
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
activeMenu: null,
},
mutations: {
setActiveMenu(state, index) {
state.activeMenu = index;
},
},
});
```
这样,当用户刷新页面时,`el-menu` 组件会自动选中之前选中的菜单项。