header组件编写和Vuex store创建

<template>
  <header class="header">
    <h1>
      <slot></slot>
    </h1>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

引入全局样式

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

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

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

<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>