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文件

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配置中都有显示版本号如果没有责失败