<template>
    <div>
        <!-- 头部组件示例 -->
        <!-- 例如当前模块多个页面需要，我们可以把这个模块封装出来，达到组件复用的效果
             可以按需载入，也可以全局载入，按照项目需求来完成
         -->
        <div v-for="(item,index) in header" :key="index" @click="gethome">
            <h1 class="h1">{{item.value}}</h1>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                header:[]
            }
        },
        methods:{
            //获取头部标题
            getheader(){
                this.$http.get("/config/values?keys=mallName").then(res=>{
                    // console.log(res.data.data);
                    this.header=res.data.data
                })
            },
            //点击事件，当处于其他页面时返回首页
            gethome(){
                this.$router.push("/home/homepage" ?"/home/homepage" : "");
            }
            
        },
        mounted(){
            this.getheader()
        }
    }
</script>

<style scoped>
    .h1{
        text-align: center;
    }
</style>