vue中自定义菜单在刷新后保持选中状态的实现方式

自定义菜单.png

先说一下自定义菜单的基本实现，当我们在做自定义菜单并实现初始选中及点击切换选中状态时，常规操作是这样的

        
{{item.name}}

//js部分
export default {
    data() {
      return {
        activeIndex: 0,
        list:[
          {name: '公司简介',value: 'company'},
          {name: '平台优势',value: 'adv'},
          {name: '联系我们',value: 'callMe'}
        ]
      };
    },
    methods: {
      activeClick(index){
        console.log(index)
        this.activeIndex = index;
        this.$router.push({ name: this.list[index].value });//路由跳转
      }
    }
  };

以上代码实现了自定义菜单的基本功能，但是并不完善，当我们选中某个标签并刷新页面时，页面的选中状态发生了变化，变成了默认选中的第一个，所以我们初始需要获取路由的值来给activeIndex重新赋值，可以通过以下调整来实现。

        
        
{{item.name}}

//js部分
export default {
    data() {
      return {
        onActive:'company',//可以选list的第一个value值，也可以为空
        list:[
          {name: '公司简介',value: 'company'},
          {name: '平台优势',value: 'adv'},
          {name: '联系我们',value: 'callMe'}
        ]
      };
    },
    mounted () {
      // console.log(this.$route)
      //在这里做初始化的选中
      this.onActive = this.$route.name
    },
    methods: {
      activeClick(index){
        console.log(index)
        //点击时重新赋值
        this.onActive = this.list[index].value;
        this.$router.push({ name: this.list[index].value });//路由跳转
      }
    }
  };

大功告成，如果大家有更好的实现方式请多多指点~