<template>
    <div class="demo-nav" v-if="showFlag">
        <div class="goback" @click="goback">
            <b class="go-btn"></b>
        </div>
        <div class="title">{{title}}</div>
        <a class="home" :href="hrefUrl">文档</a>
    </div>
</template>

<script>
export default {
    data(){
        return{
            showPath:''
        }
    },
    methods:{
        goback(){
            if (self != top || history.length===1) { 
                this.$router.push('./index');
            }else{
                history.back();
            }
        },

    },
    computed:{
        showFlag(){
            if(this.showPath == '/index'){
                return false;
            }else{
                return true;
            }
        },
        title(){
            return this.showPath.substring(1);
        },
        hrefUrl(){
            return './index.html#'+this.showPath;
        }
    },
    watch:{
        '$route':{
            immediate:true,
            handler:function(to, from){
                this.showPath = to.path;
                //document.documentElement.scrollTop = document.body.scrollTop = 0;
        }}
    },
    mounted(){     
    }
}
</script>

<style>
    .demo-nav{
        width: 100%;
        height: 40px;
        background-color: #F8F8F8;
        border-bottom: 1px solid #eee;
        display:flex;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        position: fixed;
        top:0;
        left: 0;
        z-index: 1000;
    }
    .goback{
        cursor: pointer;
        width: 45px;
        height: 40px;
        display: flex;
        align-items: center;
    }
    .go-btn{
        display: block;
        width: 20px;
        height: 20px;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAApCAYAAAAvUenwAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC4UlEQVRIx8WXX2hOYRzHP9s082exyCKlXciUslxI/gznOFijoRal2IVW3Llx6vRcPj31XHAhyQ2luMAYa8zyvq8lSlqL1jItaZKhRlqmtJmL8xuv2Z/3z1Oeu/fzPuf7Oc/vnOd3zinA8dDGFgMXgXrgbIHj8LlAE1Aj6JMzgTa2FGgBtgkaBY45EWhjy4B7wAZBI0CDisKreQu0sUuAdqBK0A/gkIrCZoC8BNrYZUASqBQ0DBxQUdg+PidngTa2QsIrBA0Be1QUPkqfl5NAG1sJPACWC/oM1KgofDZxbtYCbexa4pqXC/oI7FJR+GKy+VkJtLHrgftAmaB3QKCisHeqYwqzCK8GEmnhb4Dq6cIzFmhjdwNtQKmgXmCzisI3Mx07o0Abux+4A8wV9BzYqqLwfSYnN61AG3sYuA4UC3oKeCoKP2Va2ikF2thG4DIwS1AHsFNF4ZdMw6cUaGNPAheAIkFtQK2KwqFswicVaGMVcIY/t/AtYJ+KwuFsw2HCPtDGWuBUGrpC3BVHcwn/awXa2NMTwi8AR/MJ/70CbexxKUuJ8G6gSkXhz3zCQS5iKpno9PygBKgWXg6s8PygNZVMjOUtEMlDzw8Kga2CqoBVnh+0pJKJnMtUlP4jlUx0eH7wHdgh5VsDVHl+0JxKJkZyEUzaTbWxJ4Bzaf8ngToVhd+cCERyBLiUtsonxJvtqxOBSOqJ98J4L+oibheDTgQiqQVuAHME9RA/ZAacCETiEbfs+YL6RNLvRCCSjcBdYKGgfpH0ORGIZB3xA3+xoAGR9DgRiGQ18W27VNAg8YXvmmx+xg/98aGi8CWwRUoEsAhIaWM3ORGI5DVx33olaAHQro31nQhE8pb4Vb1b0DygVRu714lAJB+A7UCnoBKgSRt70IlAJIOADzwWVAxc1cY2QJ6v7+lDPp9uA4GgMaDR9TfabOAaUCfoY1Eeef+MVDIx6vnBTeI9shI47zL//4xfCJTnunU1hbUAAAAASUVORK5CYII=') no-repeat;
        background-size: contain;
        
    }
    .title{
        flex:1;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
    }
    .home{
        width: 53px;
        text-decoration:none;
        color:#000;
    }
</style>
