element-ui导航栏刷新保持点击状态

element-ui导航栏刷新保持点击状态功能

最近在做项目的时候，有一个需求是刷新导航栏，可以保持点击选中的状态。

经过我的研究以及搜索，我发现有一个方法

<el-menu
        ref="menu"
        @select="keep"
        router
        width=100%
      :default-active='activepath'
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"> 
      <el-menu-item index="studio">工作室</el-menu-item>
      <el-menu-item index="studio_members">工作室成员</el-menu-item>
      <el-menu-item index="notice">公告</el-menu-item>
      <el-menu-item index="sign_up">报名</el-menu-item>
      <el-menu-item index="personal">个人信息</el-menu-item>
    </el-menu>

通过ref属性和router，default-active属性来实现，

ref属性是让我们获得对应组件，以便对其进行操作

router属性表示，导航栏的index可以作为路由跳转路径（这个是导航栏跳转的基本）

最主要的就是default-active这个属性，他的意思是默认打开的路由，因为此路由需要改变，所以我们需要给他绑定值，此处是activepath

data(){
      return{
        //导航栏
        activepath:'studio'
      }
      
    },

我们默认打开第一个，这里则是studio

通过查阅官方文档，我们可以发现有一个select事件，这个事件是导航栏被点击就会触发一次

我们选择select事件，表示被选择时触发 keep这个函数

 methods:{
      //导航栏的动态保存
      keep(){
        sessionStorage.setItem('navkeep',this.$refs.menu.activeIndex);
      }
    },

这里需要说明一下，因为我们设置了ref，所以我们可以可以在this里面通过$.refs.menu获得这个左边栏组件，然后里面有一个自带的属性值activeIndex用于保存你所点击的el-menu-item 的index，所以我们可以拿到我们所点的对应的index，通过设置session的方式保存这个值，我们这里保存到了navkeep这个变量里面，

然后还记得我们之前设置的default-active吗，我们在组件创造完成的时候把activepath改成我们对应的

//生命周期函数
    created(){
      if(sessionStorage.getItem('navkeep')){
        this.activepath=sessionStorage.getItem('navkeep');
      }
    }

这样一来刷新则会保存点击状态了