Vue3中axios、router等使用遇到的问题

Vue3中axios与router的简单应用,

最新推荐文章于 2024-08-09 04:40:10 发布

眸笑丶

最新推荐文章于 2024-08-09 04:40:10 发布

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/baozi141990/article/details/130418113

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue3中axios的封装，包括安装、设置和使用，以及如何在main.js中配置。同时，文章讲解了Vue3的路由(router)安装、基础使用和动态路由的概念，提供了创建和使用路由的示例。

前言

Vue 2 将于 2023 年 12 月 31 日停止维护,部分项目开发也开始使用Vue 3,在这里记录一下使用的问题.

部分内容使用了Element-Plus ,如不需要可以删除

一、axios封装

axios的使用基本与Vue2相同,不一样的是在main.js中的调用导出不同.
首先安装需要的插件:

1. 安装

npm install axios
npm install qs

2. 封装

创建一个文件axiosScript.js:

import axios from "axios";
import { ElMessage } from 'element-plus'
import qs from "qs";


//post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

//允许跨域携带cookie信息
axios.defaults.withCredentials = true;
//设置超时
axios.defaults.timeout = 15000;

axios.defaults.baseURL = '/api'

axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        ElMessage({
            message: error,
            type: 'error',
        })
        console.error(error)
        return Promise.reject(error);
    }
);

export default {
    /**
     * @param {String} url 
     * @param {Object} data 
     * @returns Promise
     */
    post(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url,
                data: qs.stringify(data),
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: data,
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
};

main.js中配置:

import axiosScript from './util/axiosScript'
...
app.config.globalProperties.$axios = axiosScript

3. 代理设置

如果需要设置代理则在vue,config.js中添加:

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: VUE_APP_BASE_API,
                ws: true,
                changeOrigin: true, 
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        port: 5002
    }
}

二、路由(router)

1. 安装

npm install router

2. 使用

可以创建一个文件专门用来保存路由信息,新建文件夹router,在创建文件index.js:

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'



const routes = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

main.js中配置:

import router from './router/index'
...
app.use(router)

3. 动态路由

后续更新

总结

以上就是这次记录的内容，本文仅仅简单介绍了Vue3中axios与router的使用，其他内容在后面会进行更新