vue组件的路由高亮问题

vue组件的路由高亮问题

之前我对于路由的高亮都是使用缓存，给他的所有路由遍历一遍，每点击一下的时候，给他的当前值高亮，赋值active。后来发现一刷新就不行，高亮的就变成默认值0了，这里主要是将这个问题的解决办法。

第一种是通过这样的添加类：

.router{
        font: 12px/40px '微软雅黑';
        background: pink;
        background: pink;
        color: white;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width: 40px;
        background: pink;
        &.isActive{
            background: blue;
            color:red;
        }
    }

第二种是监听path：

原本的代码是这样的：

<template>
<div id="main">
    <ul style="height:40px;background:pink;">
        <li  class="router" v-for="(item,index) in items" :key="index" style="float:left;" :class="item.isActive?'isActive':''" @click="routerTo(item,index)">
            <span >{{item.name}}</span>
        </li>
    </ul>
    <router-view></router-view>
    </div>
    
</template>
<script>
    export default {
        data () {
            return {
                activeIndex2:'0',
                items:[
                    {name:'twoPage',code:'twoPage',path:'/twoPage',defaultIcon:require('@/assets/icon/BehaviorRank-default.png'),
                    activeIcon:require('@/assets/icon/behaviorrank-active.png'),isActive:true},
                    {name:'three',code:'three',path: '/three',defaultIcon:require('@/assets/icon/ChannelAllocation-default.png'),
                    activeIcon:require('@/assets/icon/ChannelAllocation-active.png'),isActive:false},
                    {name:'four',code:'four',path:'/four',defaultIcon:require('@/assets/icon/myReport-default.png'),
                    activeIcon:require('@/assets/icon/myReport-active.png'),isActive:false},
                ],
            }
        },
        methods:{
            routerTo(item,index) {
                 for (let i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                    
                }
                this.items[index].isActive=true
                this.$router.push({name:item.name})
               
            },
        }
    }
</script>
<style lang='less'>
#main{
    .router{
        font: 12px/40px '微软雅黑';
        background: pink;
        background: pink;
        color: white;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width: 40px;
        background: pink;
        
    }
    .isActive{
            background: blue;
            color:red;
        }
    
}

</style>

效果：

但如果点击刷新会这样：高亮的Index跑到了初始化0的位置。

如何解决这种问题，
有一种方法是通过缓存sessionStorage。每次点击一下就存入缓存，刷新就从变量取值，变量没有值就从缓存取值。但一直存一直取可能有的人觉得麻烦。
还有一种方法就是初始化的时候获取路由，根据不同的路由激活对应的导航

created(){
            // var path=window.location.hash.slice(2);//没有参数时这种写法也可以，不推荐
            var path=this.$route.name//推荐这种
            console.log(path)
            if(path){
                for (let i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                }
                switch(path){
                    case 'twoPage':
                    this.items[0].isActive=true;
                    break;
    
                    case 'three':
                    this.items[1].isActive=true;
                    break;
    
                    case 'four':
                    this.items[2].isActive=true;
                    break;
                }
            }
        },

第三种 使用elementui的sub-menu 的 default-active属性

menu:
主要是 :default-active="$route.path"通过路由监听，然后根据不同路由实现默认的高亮

<template>
    <div class="menu">
      <el-menu  :default-active="$route.path"  class="el-menu-demo" background-color="#0f2c70"
      text-color="#fff" active-text-color="#ffd04b" mode="horizontal" >
      <sub-menu v-for="(item,index) in menuList" :key="item.id" :menuItem="item"></sub-menu>
      </el-menu>
    </div>
</template>
<script>
import subMenu from './ElMenu.vue'
export default {
  components:{
    subMenu
  },
  data() {
    return {
      menuList: [],
    };
  },
  methods:{
    async getList(){
      let res = await queryPtMenuTreeList()
      this.menuList = res.data
    }
  },
  created(){
    this.getList()
  }
};
</script>
<style lang="less">
  .menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f2c70;
  }
</style>

elMenu
但el-submenu和el-menu-item需要注意的是 ，index必须是 当前item的path属性，否则default-active="$route.path无法实现效果

<template>
    <el-submenu :index="menuItem.path" v-if="menuItem.children && menuItem.children.length > 0" 
        :popper-append-to-body="false">
        <template #title>{{menuItem.name}}</template>
        <sub-menu v-for="(it,index) in menuItem.children" :key="it.id" :menuItem="it"></sub-menu>
    </el-submenu>
    <el-menu-item :index="menuItem.path" v-else @click="routerTo(menuItem)">{{menuItem.name}}</el-menu-item>
</template>
<script>
import subMenu from '@/components/ElMenu.vue'
export default {
  name: "sub-menu",
  components:{
      subMenu
  },
  data() {
    return {
        activeIndex:'/home'
    };
  },
  props:{
      menuItem:''
  },
  methods:{
    routerTo(menuItem){
        this.$router.push({path:menuItem.url})
    }
  }
};
</script>
<style lang="less">
</style>