springboot vue从一个页面到另一个页面把需要的数据显示到新页面上
时间: 2024-12-13 21:17:36 浏览: 12
在Spring Boot项目中结合Vue.js,通常采用前端路由和API交互的方式实现在一个页面跳转到另一个页面并显示数据的需求。具体步骤如下:
1. **安装依赖**:
- 在Vue项目里,使用`vue-router`库管理路由,可以使用npm或yarn进行安装:
```bash
npm install vue-router
# 或者
yarn add vue-router
```
2. **配置路由**:
在`src/router/index.js`文件中设置路由规则,比如:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: Home },
{ path: '/details/:id', component: Detail },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
这样当访问'/details/:id'路径时,Vue会动态获取id参数,并将其传递给Detail组件。
3. **数据请求**:
在Vue组件中,通过`axios`或者其他HTTP客户端库向后台发送GET请求获取数据。例如,在`Home.vue`中,跳转前你可以做数据加载预处理:
```javascript
methods: {
goToDetails(id) {
axios.get(`/api/details/${id}`).then(response => {
this.detailData = response.data; // 假设response.data是所需的数据
}).then(() {
this.$router.push('/details/' + id);
});
}
}
```
4. **显示数据**:
在`Detail.vue`组件中接收`id`参数和`detailData`作为props,然后在模板中渲染数据。
```html
<template>
<div v-if="detailData">
<!-- 显示接收到的数据 -->
</div>
</template>
<script>
export default {
props: ['id', 'detailData'],
data() {
return {};
},
};
</script>
```
阅读全文