vue3使用router + axios

一、router

1、router加载依赖

npm install vue-router @4

@4 是版本号也可以@5等有的以上版本

2、创建router相关js文件并写入类容

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

const router = [
   {
       path: '/',
       name: 'login',
       componen: () => import('@/pages/login'),
   },
]

export default router

其中 path是访问路径，name时路由名称，component: () => import('@/pages/login')是对应vue组件所在目录。

3、在main.js文件引入router文件

扫描二维码关注公众号，回复： 16303886 查看本文章

import router from './router/index.js'

app.use(router)

createApp(App).mount('#app');

二、axios

1、加载依赖

npm install axios

2、在src文件下创建axios 的js文件并写入相应的配置

//axiosInstance.js
//导入axios
import axios from 'axios'

//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const API = axios.create({
   baseUrl:'https://www.****.cn/', //请求后端数据的基本地址，自定义
   timeout: 4000, //请求超时设置，单位ms
   Headers:{
       'X-Requested-With': 'XMLHttpRequest',
       'content-type': 'application/x-www-form-urlencoded'
   } //可以根据要求添加
})
// axios实例拦截响应
API.interceptors.response.use(
(response: AxiosResponse) => {
return response;
},
// 请求失败
(error: any) => {
return error;
}
);

// axios实例拦截请求
API.interceptors.request.use(
(config: AxiosRequestConfig) => {
return config;
},
(error:any) => {
return Promise.reject(error);
}
)

//导出我们建立的axios实例模块，ES6 export用法
export default API

3、main.js文件挂载

import axios from '@/plugins/axiosInstance.js'
import router from './router/index.js'

app.use(router)
createApp(App).mount('#app');
app.config.globalProperties.$axios=axios; //配置axios的全局引用

注意：

router 和axios加载依赖成功后再package.json配置中都有显示版本号如果没有责失败

vue3使用router + axios

猜你喜欢