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>
3.png

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

转载请注明出处!!!(https://www.jianshu.com/p/b088b54ec794

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,165评论 1 32
  •   支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...
    霜天晓阅读 1,104评论 0 2
  • 1.xcode5和xcode7区别 1.xcode7没有Frameworks文件夹,xcode7内部会自动帮你导入...
    彼岸的黑色曼陀罗阅读 528评论 0 2
  • “谈起我的生活,这使我喘不过气,好像翻着大筋斗,从空荡的天空,跌落又醒来”。如果生活总是太过平顺,反倒会被失去活力...
    可语阅读 337评论 4 0
  • 今天我要说的主题是朋友圈的文章有可能会害了你。 可能在现在的生活多,有很多人和我一样,总感觉自己一天忙忙碌碌,没什...
    蝙蝠女侠_TS阅读 541评论 0 0