element ui 关于标签页导航

标签页导航组件修改样式：

.el-tabs__header .is-top div{
    height:30px !important;
    line-height:30px !important;
    color:#9ca7b5;
}

.el-tabs__header .is-top div :hover{
    color:#55aaff;
}

父组件：

<div class="history-router">

　　<history-router></history-router>

</div>


<script>

　import historyRouter from '../../view/historyrouter.vue'

　　components:{
　　　　historyRouter
　　},

</script>


<style>

　.history-router{

　　　　padding:0px 20px;
　　}

　</style>

 

标签页导航组件：

<template>
    <div class="el_breadcrumb" v-if="historyrouter.length">
        <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit" @tab-click="to">
          <el-tab-pane
            :key="item.name"
            v-for="(item, index) in historyrouter"
            :label="item.title"
            :name="item.id"
          >
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                historyrouter:[{
                }],//历史记录
                editableTabsValue:''
            }
        },
        mounted(){
            this.gethistoryrouter()
        },
        methods:{
　　　　　　　//点击标签路由跳转
            to(a,b){
                this.historyrouter.find((v,i)=>{
　　　　　　　　　　　　//判断路由id和回调的name是否一致,name只能为字符串
                    if(v.id==a.name){
                        this.$router.push({
                            path:v.path
                        })
                    }
                })
            },
　　　　　　　 //删除标签
             handleTabsEdit(targetName, action) {
                this.historyrouter.find((v,i)=>{
　　　　　　　　　　　　//targetName回调被改成传路由id，由于删除需要标识，所以name不使用路由名称
                    if(v.id==targetName){
                        this.historyrouter.splice(i,1)
                        if(this.historyrouter[0].path){
                            localStorage.setItem('histryrouter',JSON.stringify(this.historyrouter))
                        }else{
                            localStorage.removeItem('histryrouter')
                        }
                    }
                })
             },
　　　　　　　//获取历史记录
            gethistoryrouter(){
                var historyrouters=JSON.parse(localStorage.getItem('histryrouter'))
                if(historyrouters){
                    this.historyrouter=historyrouters
                }
            }
        },
　　　　　//组件停用被查询历史记录
        deactivated(){
            this.gethistoryrouter()
        }
    }
</script>

<style>
</style>

导航守卫:

router.beforeEach((to,from,next)=>{
    if(to){
        // localStorage.clear()
        next()
        if(to){
            var historyrouter=JSON.parse(localStorage.getItem('histryrouter'))
            var timestamp=new Date().getTime()+''//获取时间戳，设置为路由唯一标识，但组件name值只能为字符串，所以加上引号
            if(historyrouter){
                var maxlengrh=historyrouter.length-1
　　　　　　　　　 //防止连续记录重复路由
                if(historyrouter[maxlengrh].path!=to.path){
                    historyrouter.push({path:to.path,title:to.meta.title,id:timestamp})
                    localStorage.setItem('histryrouter',JSON.stringify(historyrouter))
                }
            }
            else{
                localStorage.setItem('histryrouter',JSON.stringify([{path:to.path,title:to.meta.title,id:timestamp}]))
            }    
        }
    }
})