src\components\Header\index.vue

<template><header class="header"><h1><slot></slot></h1></header>
</template><script>
export default {name: 'Header'
}
</script>

src\main.js

引入全局样式

import '@/assets/css/resets.css'
import '@/assets/css/border.css'
import '@/assets/js/common.js'

src\store\state.js

export default {headerTitle:'当天信息'
}

src\store\mutations.js

export default {setHeaderTitle(state, routerName) {switch (routerName) {case 'day':state.headerTitle = '当天信息'breakcase 'month':state.headerTitle = '近期假期'breakcase 'year':state.headerTitle = '当年假期'breakdefault:state.headerTitle = '当天信息'break}},
}

src\App.vue

<template><nav><my-header>{{ headerTitle }}</my-header><router-link /></nav><router-view />
</template><script>
import MyHeader from '@/components/Header'import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'export default {name: 'App',components: {MyHeader,},setup() {const store = useStore(),state = store.state,router = useRouter()router.push('/')return computed(() => state).value},
}
</script>