vue切换组件页面重叠
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue切换组件页面重叠相关的知识,希望对你有一定的参考价值。
参考技术A 使用laravel更新vue中的数据,而不刷新页面或重叠div 如果您的button在表单中,您可能希望向其添加type="button"属性或阻止表单提交操作。 Add...Vue.js - 从一个组件切换到另一个
【中文标题】Vue.js - 从一个组件切换到另一个【英文标题】:Vue.js - switching from one component to another 【发布时间】:2020-10-25 19:47:33 【问题描述】:我对 vue.js 还是很陌生。 我有一个页面,其中列出了人员列表的详细信息,每个人都有一个“编辑”按钮。 当我单击“编辑”按钮时,我想切换到另一个页面,该页面显示用于编辑所选人员详细信息的表单。
我不确定最好的方法是什么。我在我的解决方案中使用了 Bootstrap 和路由器。
选项 1:我认为单击“编辑”按钮时路由到“/person/:id”会很简单,但不确定如何通过单击处理程序方法执行此操作。 p>
选项 2: 下面是主要组件,我试图在收到来自任一组件的事件时在“PersonsList”和“EditPersonData”这两个组件之间切换。 PersonsList 正在成功发出事件,但我不确定如何在这里收听并切换到 EditPesonData 组件。
主页.vue
<template>
<div class="home">
<h1 class='home-text'>
message
</h1>
<component v-bind:is="component"/>
</div>
</template>
<script>
import PersonsList from '@/components/PersonsList'
import EditPersonData from '@/components/EditPersonData'
export default
name: 'Home',
data()
return
message: 'Welcome to Person Details!',
component: "PersonsList"
,
components:
PersonsList,
EditPersonData
;
</script>
非常感谢任何帮助。
谢谢
【问题讨论】:
【参考方案1】:最好的方法是将id
作为param
在路由/person/:id
中发送。
为此,您可以附加每个列表项的 id,例如:
<div v-for="(user,index) in userList" :key="index">
<a :href="'/person/' + user.id">Edit</a>
</div>
然后,您将在另一个组件中以this.$route.params.id
的形式获取它,以获取有关此 id 用户的更多详细信息。
确保在路由器中使用 id 参数定义路由,如下所示:person/:id
更新:
如果您想更改 click
函数上的路由:
<b-btn @click="editPerson(user.id)">Edit</b-btn>
并在方法中,添加如下函数:
editPerson(userId)
this.$router.push(
name: 'person',
params: id: userId
);
【讨论】:
我在以上是关于vue切换组件页面重叠的主要内容,如果未能解决你的问题,请参考以下文章