vue-router
文章目录
vue-router异步请求axios请求
跨域vue.config.js跨域请求代理配置
异步请求
在实际的应用开发中，与后端交互，进行异步请求是很常见的需求
axios
npm i axios
请求
// home.vue
<template>
<div class="home">
Home
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'home',
data() {
return {
items: []
}
},
created() {
axios({
url: 'http://localhost:7777/items'
}).then(res => {
this.items = res.data;
});
}
}
</script>
跨域
vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理
vue.config.js
在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件
跨域请求代理配置
module
.exports
= {
devServer
: {
proxy
: {
'/api': {
target
: 'http://localhost:7777',
pathRewrite
: {
'^/api': ''
}
}
}
}
}
修改配置文件，需要重启服务：npm run serve
// home.vue
<script>
...
created() {
axios({
url: '/api/items'
}).then(res => {
this.items = res.data;
});
}
...
</script>
