页面刷新后如何保持引用的导航组件的选中样式（下划线，背景色）不被清除

使用场景：用标签页或者第三方导航组件时当页面被刷新或重新年进入的时候，组件内data定义的状态值初始值会将选中的样式初始化

更改后效果图:页面刷新后，下划线立即定位到当前页面的nav下

解决思路：

既然是由于页面加载时的初始状态中（data()中）的默认值造成影响，就可以在这个地方添加判断

activeName: this.$route.path==='/page2'?'second':this.$route.path==='/page3'?'third':this.$route.path==='/page4'?'fourth':'first',     //解决方法

<template>
    <div class="w1200 m-a flsb">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="">
            <el-tab-pane label="用户管理" name="first"></el-tab-pane>
            <el-tab-pane label="配置管理" name="second"></el-tab-pane>
            <el-tab-pane label="角色管理" name="third"></el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
   data(){
       return{
           //activeName：“first”
           activeName: this.$route.path==='/page2'?'second':this.$route.path==='/page3'?'third':this.$route.path==='/page4'?'fourth':'first',     //解决方法
       }
   },
   methods:{
       handleClick(tab, event){
            if(tab.name==='first'&&this.$route.path!='/page1') this.$router.push({path:'./page1'})   //避免路由重复进入
            if(tab.name==='second'&&this.$route.path!='/page2') this.$router.push({path:'./page2'})
            if(tab.name==='third'&&this.$route.path!='/page3') this.$router.push({path:'./page3'})
            if(tab.name==='fourth'&&this.$route.path!='/page4') this.$router.push({path:'./page4'})
       }
   }
}
</script>

<style>
.el-tabs__header{
    margin-bottom: 1px;
}
</style>