vue3 路由加载axios

在 Vue3 中，可以使用 Vue Router 和 Axios 进行路由加载和数据请求。以下是一个简单的示例：

1. 安装 Vue Router 和 Axios

在终端中运行以下命令：

npm install vue-router axios

2. 创建路由实例

在 `src/router/index.js` 中创建路由实例：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // 定义路由
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

在 `routes` 数组中定义你的路由。

3. 在 main.js 中引入路由实例

在 `src/main.js` 中引入路由实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4. 在组件中使用路由和 Axios

在组件中可以使用 `this.$router` 和 `this.$axios` 来访问路由和 Axios。

例如，在一个组件中使用 Axios 发送 GET 请求：

export default {
  methods: {
    fetchData() {
      this.$axios.get('/api/data').then(response => {
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在另一个组件中使用路由跳转到另一个页面：

export default {
  methods: {
    goToPage() {
      this.$router.push('/page')
    }
  }
}

这就是如何在 Vue3 中使用 Vue Router 和 Axios 进行路由加载和数据请求的简单示例。