下面是实现的步骤：
1. 安装axiosaxios是一个流行的javascript库，可以帮助我们在vue和spring boot之间发送http请求。要使用axios，我们需要先在vue应用程序中安装它。可以使用npm包管理器来安装axios。在终端中执行以下命令即可：
npm install axios
2. 创建vue组件我们需要创建一个vue组件，它将发送http请求并显示响应数据。可以使用vue cli来创建一个新的vue项目。在终端中执行以下命令即可：
vue create my-vue-app
此命令将使用vue cli创建一个新的vue项目。接下来，我们需要在该项目中创建一个新的组件。在src/components目录中创建一个名为springbootcomponent.vue的文件，文件内容如下：
<template> <div> <button v-on:click="sendrequest">发送请求</button> <div v-if="response">{{ response }}</div> </div></template><script>import axios from 'axios';export default { name: 'springboot-component', data() { return { response: null }; }, methods: { sendrequest() { axios.get('http://localhost:8080/api/data') .then(response => this.response = response.data) .catch(error => console.log(error)); } }};</script>
在上面的代码中，我们定义了一个名为springboot-component的vue组件。该组件包含一个按钮和一个用于显示响应数据的div元素。当单击按钮时，将调用sendrequest方法。该方法使用axios发送一个http get请求到http://localhost:8080/api/data url，并将响应数据设置为组件数据的一部分（即“response”）。
3. 创建spring boot rest api我们需要创建一个spring boot rest api，以便接收vue应用程序发送的http请求，并返回响应数据。在此示例中，我们将创建一个简单的rest api，该api将返回随机的数字。在eclipse或intellij idea中创建一个新的spring boot项目，并创建一个名为datacontroller的类，如下所示：
@restcontroller@requestmapping(/api)public class datacontroller { @getmapping(/data) public int getdata() { return new random().nextint(1000); }}
在上面的代码中，我们定义了一个名为datacontroller的类，并定义了一个名为getdata的get请求映射。在getdata方法中，生成一个介于0到999之间的随机数字，并将其作为响应数据返回。
4. 运行vue和spring boot应用程序为了使vue和spring boot应用程序协同工作，我们需要同时运行这两个应用程序。在终端中，打开vue应用程序目录，并运行以下命令：
npm run serve
此命令将启动vue开发服务器，并使我们可以在浏览器中访问应用程序（默认情况下，访问url为http://localhost:8080）。
在eclipse或intellij idea中，运行spring boot应用程序。此时，spring boot应用程序将开始监听http://localhost:8080 url上的http请求。vue应用程序将使用此url来发送http请求。
在浏览器中，访问vue应用程序。单击“发送请求”按钮，vue应用程序将向spring boot应用程序发送http请求。spring boot应用程序将随机数字作为响应数据返回，并将其显示在vue应用程序中。
这就是在vue应用程序中发送请求到spring boot的方法。通过使用axios和rest api，我们可以在vue和spring boot之间轻松地发送http请求和响应数据。
以上就是解析vue怎么发送请求到springboot程序的详细内容。