如何用springboot+vue写一个页面调到另一个页面
时间: 2024-02-01 09:02:04 浏览: 26
使用SpringBoot和Vue编写一个页面跳转到另一个页面的方法如下:
1. 首先,在Vue中创建两个组件,分别表示两个页面。可以在Vue的components文件夹下创建两个.vue文件,例如Page1.vue和Page2.vue。
2. 在Page1.vue中,添加一个按钮或者链接,用来触发页面跳转。可以使用Vue Router来管理路由。
3. 在Vue Router的配置文件中,添加一个路由路径,将该路径与Page1.vue组件关联起来。
4. 在Page1.vue组件中,通过点击按钮或者链接,使用Vue Router的编程式导航方法,跳转到Page2.vue组件。
5. 在Page2.vue组件中,可以添加返回按钮或者链接,用来返回Page1.vue页面。
下面是一个示例代码:
Page1.vue:
```
<template>
<div>
<h1>Page 1</h1>
<button @click="goToPage2">Go to Page 2</button>
</div>
</template>
<script>
export default {
methods: {
goToPage2() {
this.$router.push('/page2');
}
}
}
</script>
```
Page2.vue:
```
<template>
<div>
<h1>Page 2</h1>
<button @click="goBack">Go Back to Page 1</button>
</div>
</template>
<script>
export default {
methods: {
goBack() {
this.$router.push('/page1');
}
}
}
</script>
```
在Vue Router的配置文件中,需要添加以下配置:
```
import Vue from 'vue';
import VueRouter from 'vue-router';
import Page1 from '@/components/Page1.vue';
import Page2 from '@/components/Page2.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page2 },
];
const router = new VueRouter({
routes
});
export default router;
```
在main.js文件中,需要将Vue Router与Vue实例关联起来:
```
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
```
这样,当点击Page1.vue中的按钮时,页面将跳转到Page2.vue;当点击Page2.vue中的按钮时,页面将返回到Page1.vue。