路由请求数据

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>