Element导航栏刷新页面后原本选中高亮消失

解决方式：往sessionStorage中添加键值对保存当前选中的导航

<template>
    <!--要开启路由模式router，并给el-menu-item添加点击事件saveNavState-->
    <div>
        <el-menu :default-active="defaultActivePath" unique-opened router>
            <template v-for="item in items">
                <el-menu-item :index="item.index" :key="item.index" @click="saveNavState(item.index)">
                    <i :class="item.icon" class="item-i"></i>
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //定义default-active绑定的变量
                defaultActivePath:'',
                items: [
                    {
                        index:1,
                        title:"导航一",
                        icon:"el-icon-info"
                    },
                    {
                        index:2,
                        title:"导航二",
                        icon:"el-icon-success"
                    },
                ],
            }
        },
        created() {
            //在导航栏创建时从sessionStorage中获取设置的activePath键的值
            this.defaultActivePath = window.sessionStorage.getItem('activePath');
        },
        methods: {
            //点击导航栏时往sessionStorage添加键值对，其中值为item.index
            saveNavState(activePath){
                window.sessionStorage.setItem('activePath', activePath);
                this.defaultActivePath = activePath
            }
        }
    }
</script>

点赞、收藏的人已经开上兰博基尼了 (´▽`ʃ♡ƪ)

转载请注明出处！！！（https://www.jianshu.com/p/b088b54ec794）