vue3 路由切换加载axios 给变量books 用el-table 显示

好的，你可以按照以下步骤进行操作：

1. 安装 `axios` 和 `vue-router`：

   npm install axios vue-router

2. 创建一个名为 `books.vue` 的组件，用于显示数据：

   <template>
     <div>
       <el-table :data="books" style="width: 100%">
         <el-table-column prop="title" label="Title"></el-table-column>
         <el-table-column prop="author" label="Author"></el-table-column>
         <el-table-column prop="publisher" label="Publisher"></el-table-column>
       </el-table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         books: []
       }
     }
   }
   </script>

3. 在路由文件中，定义一个路由，用于加载数据并显示 `books.vue` 组件：

   import axios from 'axios';
   import VueRouter from 'vue-router';
   import Books from './components/books.vue';
   
   const router = new VueRouter({
     routes: [
       {
         path: '/books',
         component: Books,
         beforeEnter(to, from, next) {
           axios.get('/api/books').then(response => {
             // 将获取到的数据赋值给 books 变量
             Books.data().books = response.data;
             next();
           });
         }
       }
     ]
   });
   
   export default router;

4. 在 `main.js` 文件中，引入 `vue-router` 和路由文件，并将路由挂载到 Vue 实例上：

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import router from './router';
   
   Vue.use(VueRouter);
   
   new Vue({
     router
   }).$mount('#app');

5. 最后，在页面中添加一个链接，用于触发路由切换：

   <router-link to="/books">Books</router-link>

这样，当你点击链接时，路由会切换到 `/books` 路径，并加载数据后显示在表格中。