Vue.js - 从一个组件切换到另一个

Posted 2023-02-23

【中文标题】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 
     );

【讨论】：

我在 元素的每个 上使用 Edit​​。有什么方法可以从按钮单击路由并传入 id？ 我已经用 替换了按钮，现在它可以工作了。非常感谢您的帮助:)