vue3——element-plus 实现页面刷新之后，保持菜单的激活状态

常见场景

对于一些系统来说，实现菜单的功能太显而易见了。
但是对于从0-1的实现，还是会有一些问题。
比如，在根据element文档，配置好了菜单项以及点击的切换菜单的操作。
但是当我们刷新页面的时候，就会出现下面两种情况

1，刷新页面之后，菜单失去高亮操作
2，刷线页面之后，菜单高亮项和右边 显示的不同。

实现的效果

这篇博文要实现的效果就是为了解决上面的两个问题。

当页面手动刷新的时候，菜单保持激活状态，并且和右边显示的页面保持一致。

实现的步骤

1，解决刷新页面之后，菜单失活，没有高亮的菜单项。
可以看element-plus的介绍，直接使用下面的关键词即可。

2， 解决手动刷新页面之后，左边菜单项和右面的页面对不上的情况。

根据1的解决方式，可以解决失活的问题，但是又会引起另一个问题，那就是当刷新页面的时候，菜单高亮的是你默认设置的菜单项，但是右面的页面显示的是刷新之前最后一次点击的页面。
解决方式：

• 绑定点击事件
• 将点击后的path存在sessionstorge中
• 刷新更新即可

<el-menu
      :default-active="activePath" // 绑定的变量
      class="el-menu-vertical-demo"
      router
    >
    // 绑定的事件
 <el-menu-item :index="item.index" @click="saveEnumClick(item.index)"> 
// 下面的操作
 setup() {
 	// 获取刷新之前的path，如果没有，指定一个默认的
    const currIdx = sessionStorage.getItem('currIdx')
    const activePath = currIdx ? currIdx : 'person'
    // 保存当前激活的路径
    function saveEnumClick(path){
     sessionStorage.setItem('currIdx', path)
    }
    return {
      enumData,
      activePath,
      saveEnumClick
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22