如何使用来自 json 文件的 vue-router 的用户 ID 检查特定的用户详细信息组件？

Posted 2023-02-22

【中文标题】如何使用来自 json 文件的 vue-router 的用户 ID 检查特定的用户详细信息组件？

【英文标题】：How to check an specific user detail component using the user ID with vue-router from json file?

【发布时间】：2019-10-19 15:13:44

【问题描述】：

我有一个Home.vue 组件，它从user.json file 输出用户列表。我创建了一个路由器来将每个用户链接到userProfile.vue 组件，我们将在其中根据用户 ID 看到用户详细信息。

我尝试过使用下面的代码，但是userProfile.vue 输出所有用户，我只想输出与路由器对应的用户ID。我知道路由器可以正常工作，因为我在链接选项卡中获得了正确的 ID。

这是我的user.json 文件：

[
    
        "id": "1",
        "jobTitle": "Lead Web Developer",
        "fullName": "John Doe",
        "email": "[e-mail]",
        "phoneNumber": "514-149-4934",
        "address": "4230, Amber Street."
    ,
    
        "id": "2",
        "jobTitle": "FrontEnd Web Developer",
        "fullName": "Jane Doe",
        "email": "[e-mail]",
        "phoneNumber": "514-365-9524",
        "address": "5609, Diamond Street."
    ,
    
        "id": "3",
        "jobTitle": "BackEnd Developer",
        "fullName": "Michael Summerland",
        "email": "[e-mail]",
        "phoneNumber": "514-892-2436",
        "address": "5609, Ruby Street"
    ,
    
        "id": "4",
        "jobTitle": "UX Designer",
        "fullName": "Johnny UnderWood",
        "email": "[e-mail]",
        "phoneNumber": "514-422-3059",
        "address": "5609, Esmerald Street"
    
]

这是我的 router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
// imports components to router
import Home from '@/components/Home.vue'
// imports userProfile component
import UserProfile from '@/components/UserProfile.vue'

Vue.use(Router)

export default new Router(
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    
      path: '/',
      name: 'Home',
      component: Home
    ,
    // route to user profile matching id 
    
      path: '/user/:id',
      name: 'UserProfile',
      component: UserProfile
    
  ]
)

这是我的 UserProfile.vue 组件

<template>
    <div class="user-profile">
        <b-navbar toggleable="lg" type="dark" variant="info">
            <div class="container">
                <b-navbar-brand class="text-uppercase mr-auto">User Profile</b-navbar-brand>
                <!-- Route link to go back to user list -->
                <router-link :to=" path: '/'"><b-button variant="success">Go back</b-button></router-link>
            </div>
        </b-navbar>

        <!-- User details -->
        <div class="user-details container mt-4">
            <div v-for="(user, id) in users" :key="id">
                <div class="user-title"><strong>User Title: </strong> user.jobTitle </div>
                <p class=""><strong>Street:</strong>   user.fullName </p>
                <p class=""><strong>Zip Code:</strong>   user.email </p>
                <p class=""><strong>City:</strong>   user.phoneNumber </p>
                <p class=""><strong>State:</strong>  user.address </p>
            </div>
        </div>
    </div>
</template>

<script>
// imports user.json file
import users from './../assets/users.json'

export default 
    name: 'UserProfile',
    data()
        return 
           users: users,
        
    ,

</script>
<style scoped lang="scss">

</style>

你也可以在这个link上查看我的github分支

任何帮助将不胜感激！

【参考方案1】：

您已更新如下代码：

    <!-- User details -->
        <div class="user-details container mt-4">
        <div v-for="(user, id) in users" :key="id">


             <div class="user-title"><strong>User Title: </strong> user.jobTitle                                    </div>
            <p class=""><strong>Street:</strong>   user.fullName </p>
            <p class=""><strong>Zip Code:</strong>   user.email </p>
            <p class=""><strong>City:</strong>   user.phoneNumber </p>
            <p class=""><strong>State:</strong>  user.address </p>
       <router-link :to=" name: 'UserProfile', params:  id: user.id ">User</router-link>
        </div>

    </div>

【讨论】：

这对我没有帮助。我只想输出当前 ID 用户。您提供给我的解决方案并不能帮助我实现这一目标。

如何获取当前用户ID？

检查上面的user.json文件和router.js文件。我知道路由器可以工作，因为当我点击主页中的用户时，我会被重定向到 www.localhost/8080/user/1、www.localhost/8080/user/2、www.localhost/8080/user/3 和依此类推...但是在 userProfile.vue 组件中，我只想显示单击的用户 ID，而不是全部。我不知道现在是否更清楚了。

我已经更新了我的帖子，提供了更多信息，包括我的项目的 github 分支链接。

我已经更新了 github "github.com/Manuel-Suarez-Abascal/user-manager-vuejs/tree/…" 中的代码。如果仍然遇到问题，请告诉我。