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

Question

我对 vue.js 很陌生。 我有一个页面，其中列出了人员列表的详细信息，每个人都有一个“编辑”按钮。 当我单击“编辑”按钮时，我想切换到另一个页面，该页面显示用于编辑所选人员详细信息的表单。

我不确定这样做的最佳方法是什么。 我在我的解决方案中使用 Bootstrap 和路由器。

选项 1 ：我认为单击“编辑”按钮时路由到“/person/:id”会很简单，但不确定如何通过单击处理程序方法执行此操作。

选项 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>

任何帮助将不胜感激。

谢谢

Answer 1

最好的方法是在路由/person/:id中将id作为param发送。 为此，您可以 append 获取每个列表项的 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 function：

<b-btn @click="editPerson(user.id)">Edit</b-btn>

在方法中，添加 function 如下：

editPerson(userId){
     this.$router.push({
          name: 'person', 
          params: { id: userId }
     });
}