vue3 路由切换加载axios 给变量books

好的，对于你的问题，我可以通过以下的代码来实现：

首先，你需要在路由组件中引入axios：

import axios from 'axios'

然后在路由切换时，使用axios获取数据并赋值给变量books：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      beforeEnter: (to, from, next) => {
        axios.get('your_data_url').then((response) => {
          // 将获取到的数据赋值给变量books
          const books = response.data
          // 将books传递给组件
          to.params.books = books
          next()
        })
      },
    },
  ],
})

在上面的例子中，我们使用了 `beforeEnter` 路由守卫来在路由切换前获取数据，然后将数据传递给组件。

在组件中，你可以通过 `$route.params.books` 来访问变量books：

export default {
  name: 'Home',
  props: {
    books: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // 从$route.params.books中获取变量books
    this.books = this.$route.params.books
  },
}

这样，当你访问Home组件时，变量books就会被加载并传递给组件。

希望这个例子能够帮助你解决问题！