Vue3中axios、router、qs等使用
前言
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',
data: qs.stringify(data),
.then(res => {
resolve(res.data)
.catch(err => {
reject(err)
get(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
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. 安装
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的使用，其他内容在后面会进行更新
