hami072里的，无法解决了，应该是。

采用的什么办法呢，倒推的。应该是之前的版本，可以。倒推的文件夹是bookstore3.0

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home'
import store from '@/store'

const routes = [
  {
    path: '/',
    redirect: {
      name: 'home'
    }
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      title: '首页'
    },
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

//设置页面的标题
router.afterEach((to) => {
  document.title = to.meta.title;
})

router.beforeEach(to => {
  // 判断该路由是否需要登录权限
  if (to.matched.some(record => record.meta.requiresAuth))
  {
    // 路由需要验证，判断用户是否已经登录
    if(store.state.user.user){
      return true;
    }
    else{
      return {
        path: '/login',
        query: {redirect: to.fullPath}
      };
    }
  }
  else
    return true;
})

export default router

App.vue

<template>
  <div id="app">
    <Header/>
    
    <router-view/>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'


export default {
  components: {
    Header,
    
  },

  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 1200px;
}


</style>

为什么里头是header而不是home呢？app.vue里，为什么？

views/Home.vue

<template>
  <div class="home" v-cloak>

  </div>
</template>

<script>

export default {
  name: 'home',
  components: {
  
  }
}
</script>
<style scoped>
.home {
  float: left;
  text-align: center;
  width: 100%;
}
[v-cloak]{
  display: none;
}
</style>

Header.vue

<template>
  <div class="header">
    <img src="@/assets/images/logo.png">
    <HeaderSearch />
    <HeaderCart/>
    <span v-if="!user">你好，请<router-link to="/login">登录</router-link>  免费<router-link to="/register">注册</router-link></span>
    <span v-else>欢迎您，{{ user.username }}，<a href="javascript:;" @click="logout">退出登录</a></span>
  </div>
</template>

<script>
import HeaderSearch from "./HeaderSearch";
import HeaderCart from "./HeaderCart";
import { mapState, mapMutations } from 'vuex'

export default {
  name: "Header",

  components: {
    HeaderSearch,
    HeaderCart
  },

  computed: {
    // user模块带有命名空间
    ...mapState('user', [
      // 将this.user 映射为 this.$store.state.user.user
      'user'
    ])
  },

  methods: {
    logout(){
      this.deleteUser();
    },
    // user模块带有命名空间
    ...mapMutations('user', [
      // 将this.deleteUser 映射为 this.$store.commit('user/deleteUser')
      'deleteUser'
    ])
  },
};
</script>
<style scoped>
.header {
    width: 100%;
    /*position: relative;*/
}
.header img{
    width: 200px;
    height: 60px;
    margin: auto;  
}
.header span{
  margin-left: 20px;
}
.header a{
  text-decoration: none;
  color: red;

}
</style>

HeaderCart.vue

<template>
  <div class="headerCart">
      <a href="javascript:;" @click.prevent="handleCart">
          <span>购物车{{ cartItemsCount }}</span>
      </a>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name:'HeaderCart',
    components: {},
    computed: {
      //cart模块带有命名空间
      ...mapGetters('cart', {
        //Vuex的store中定义的一个getter，得到购物车中商品的数量
        // 将this.cartItemsCount 映射为 this.$store.getters['cart/itemsCount']
        cartItemsCount: 'itemsCount'
      })
    },

    methods: {
      handleCart(){
        this.$router.push("/cart");
      }
    },
  }
</script>
<style scoped>
.headerCart {
    display: inline-block; 
    position: relative;
    text-align: center;
    width: 100px;
    height: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    margin-left: 20px;
    background-color:red;
    vertical-align: middle;
}

.headerCart a {
    text-decoration: none;
    color: white;
    
}
.headerCart a > span{
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 5px;
}
</style>

HeaderSearch.vue

<template>
  <div class="headerSearch">
      <input type="search" v-model.trim="keyword">
      <button @click="search">搜索</button>
  </div>
</template>

<script>

  export default {
    name:'HeaderSearch',
    data () {
      return {
        keyword: ''
      };
    },
    methods: {
      search(){
        // 当查询关键字与当前路由对象中的查询参数wd值不同时，才调用$router.push方法
        if(this.keyword != this.$route.query.wd)
            this.$router.push({path: '/search', query: {wd: this.keyword}})
      }
    },
  }
</script>
<style scoped>
.headerSearch {
    display: inline-block; 
    position: relative;
}
.headerSearch input {
    width: 400px;
    height: 30px;
}

.headerSearch button{
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 30px;
    margin: 0;
    border: none;
    color: white;
    background-color: red;
    cursor: pointer;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
//import ElementPlus from 'element-plus';
import { ElPagination } from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
//import locale from 'element-plus/lib/locale/lang/zh-cn'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'

axios.defaults.baseURL = "/api"

// 使用中文语言
locale.use(lang)

//createApp(App).use(store).use(router).use(VueAxios, axios).use(ElementPlus,{ locale }).mount('#app')
createApp(App).use(store).use(router).use(VueAxios, axios).use(ElPagination, { locale }).mount('#app')