### Vue3 配置
前端路由
在 Vue3 中，通常使用 `vue-router` 来配置
前端路由，以下是具体步骤：
#### 1. 安装 `vue-router`
使用 npm 或 yarn 安装 `vue-router`。
```bash
npm install vue-router@4
```
#### 2. 创建路由文件
在项目中创建一个 `router` 文件夹，并在其中创建一个 `index.js` 文件，示例代码如下：
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
#### 3. 在主应用中使用路由
在 `main.js` 中引入并使用路由：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
### 与
后端接口联调
#### 1. 安装 HTTP 请求库
常用的 HTTP 请求库有 `axios`，可以使用以下命令进行安装：
```bash
npm install axios
```
#### 2. 创建 API 请求文件
在项目中创建一个 `api` 文件夹，并在其中创建一个 `index.js` 文件，用于封装 API 请求：
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: 'http://your-backend-api-url', //
后端接口的基础 URL
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 处理请求错误
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 处理响应数据
return res
},
error => {
// 处理响应错误
console.log('err' + error)
return Promise.reject(error)
}
)
// 定义具体的 API 请求方法
export function getOption() {
return service.get('/api/option')
}
```
#### 3. 在组件中使用 API 请求
在组件中引入并使用封装好的 API 请求方法：
```vue
<template>
<div>
<button @click="fetchOption">获取数据</button>
<p>{{ option }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { getOption } from '../api'
const option = ref(null)
const fetchOption = async () => {
try {
const res = await getOption()
option.value = res.data
} catch (error) {
console.error(error)
}
}
</script>
```
### 注意事项
- 在开发环境中，可以使用 `vue.config.js` 进行代理配置，解决跨域问题。示例配置如下：
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://your-backend-api-url',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
程序员心声：数据对不上的那些日子
扫一扫
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
