配置文件页面组件不会显示在带有 VueJS 路由的新路由器链接上

Question

我的目标是创建一个用户列表，当您单击每个用户的 first_name 时，它会转到一个名为 Profile.vue 的新路由器视图，其中应该显示该用户的特定信息。问题是页面似乎是空白的。

我的应用如下所示：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home Page</router-link> 
      <!-- <router-link to="/">Home</router-link> -->
    </div>
    <router-view />
  </div>
</template>

我的 index.js

const routes = [

  {
    path: "/",
    name: "List",
    component: List
  },

  {
    path: "List/profile/:id",
    name: "Profile",
    component: Profile,
    props:true 
  },

在 List.vue（使用 bootsrap）中，我显示了来自 API 的用户列表，我想单击名字并打开 Profile.vue 并分别显示每个用户的信息。

<template>
  <div class="container mt-4" id="list">
    <table class="table table-bordered">
      <thead class="table-dark">
      </thead>
      <tbody>
        <tr v-for="user in userList.data" :key="user">
          <v-avatar class="figure"
            ><img :src="user.avatar" alt="Connection lost please reload"
          /></v-avatar>
          <td>
            <router-link :to="'List/profile/' + user.id">{{
              user.first_name
            }}</router-link>
          </td>
          <!-- <td>{{ user.first_name }}</td> -->
          <td>{{ user.last_name }}</td>
          <td>{{ user.email }}</td>
          <th>{{ user.id }}</th>
        </tr>
      </tbody>
    </table>
    <router-view />
  </div>
</template>



<script>
export default {
  name: "List",

  data: () => ({
    userList: [],

  }),

  created() {
    fetch("API LINK" + this.$route.params)
      .then((response) => response.json())
      .then((data) => {
        this.userList = data;
        this.default = [...data.data];
      });
  },

};
</script>




<style>
th {
  cursor: pointer;
}
</style>

Profile.vue

<template>
  <div class="container">
    <h1>This is Profile page number {{ user.id }}</h1>
  </div>
</template>

<script>

export default {
  name: "Profile",
  props: [
      'user'
  ],
  components: {},

  data: () => ({
    destinationId: this.$route.params.user.id,
  }),

  computed: {
    destination() {
      return this.userList.data.find((user) => user.id == this.destinationId);
    },
  },
};
</script>

这是我主页的样子：https://i.stack.imgur.com/wVjKZ.png

但是它转到的页面（示例）：http://localhost:8080/List/profile/7 是空白的。

Answer 1

试试这个方法一次： index.js

{
    path: "List/profile/:id",
    name: "Profile",
    component: Profile
  }

在 List.vue 中

 <td>
            <router-link :to="{ name: 'Profile', params: { user_id: user.id }}">{{
              user.first_name
            }}</router-link>
          </td>

在 Profile.vue 中 获取该 ID this.$route.params.user_id