vue如何对同一路由多次传递不同表单数据参数,并渲染出来
时间: 2024-05-13 19:14:43 浏览: 12
在中,如果需要在同一个路由中传递不同的参数并渲染出来,可以使用动态路由和$route对象来实现。
首先,在路由配置中,将需要传递的参数定义为动态路由参数,例如:
```
{
path: '/form/:id',
name: 'form',
component: Form
}
```
然后,在组件中,可以通过$route对象获取当前路由的参数,例如:
```
<template>
<div>
<h1>Form {{ $route.params.id }}</h1>
<!-- 这里根据不同的参数渲染不同的表单 -->
</div>
</template>
```
这样,当访问 /form/1 时,组件中的 $route.params.id 就会被设置为 1,从而渲染出对应的表单。当访问 /form/2 时,$route.params.id 就会被设置为 2,从而渲染出另一个表单。
如果需要在同一个页面中动态切换表单,可以使用watch监听$route的变化,根据不同的参数加载不同的表单数据。例如:
```
<template>
<div>
<h1>Form {{ $route.params.id }}</h1>
<form v-if="formData">
<!-- 这里渲染表单 -->
</form>
</div>
</template>
<script>
export default {
data() {
return {
formData: null
}
},
watch: {
'$route.params.id': {
immediate: true, // 立即执行一次
handler(val) {
// 根据不同的参数加载不同的表单数据
this.formData = loadFormData(val)
}
}
},
methods: {
loadFormData(id) {
// 加载表单数据
}
}
}
</script>
```
这样,当路由参数改变时,watch会自动执行handler方法,根据新的参数加载对应的表单数据并渲染出来。