使用element-ui的el-menu刷新保持选中状态

<template>
    <el-menu 
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router>
        <el-menu-item v-for="( item, index ) in navList" :key="index" :index="item.name">
            {{ item.navItem }}
        </el-menu-item>
    /el-menu>
</template>
<script>
xport default {
        name: "NavView",
        data() {
            return {
                activeIndex: '/index',
                navList: [
                    { name: '/index', navItem: '首页' },
                    { name: '/jotter', navItem: '笔记本' },
                    { name: '/library', navItem: '图书馆' },
                    { name: '/admin', navItem: '个人中心' }
                ]
            };
        },
        mounted() {
            this.activeIndex = sessionStorage.getItem('keyPath') || '/index';
        },
        watch: ｛
                activeIndex(newValue){
                        if(newValur != this.$route.path){
                                this.activeIndex = this.$route.path;
                        }
                }
        ｝
        methods: {
            handleSelect(keyPath) {
                sessionStorage.setItem('keyPath', keyPath);  
            }
        }
</script>

<style lang="scss" scoped>

</style>

1、handleSelect函数官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。保留一个就可以，然后把路径放在sessionStorage中。
2、在vue生命周期mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。所有加上watch监听属性来监听activeIndex。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。

原文链接：https://blog.csdn.net/qq_28262385/article/details/126003201
另一个菜单参考原文：https://blog.csdn.net/qq_31126175/article/details/81875468?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2_defaultCTRLIST_{Rate-2.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_CTRLISTRate-2.pc_relevant_default&utm_relevant_index=5