vue-router
异步请求
在实际的应用开发中,与后端交互,进行异步请求是很常见的需求
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
启动服务的时候,会读取该文件
跨域请求代理配置
// vue.config.js
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>