如何重定向到选定用户的页面 VueJS？

Question

我有一个 Twitter 的克隆，我在那里添加了一个 real-time 搜索，但我不知道如何将所需的 ID 发送到另一个组件。这样我就可以加载所选用户的页面。

流程图更清晰：

有我的代码示例：

<template>
<input type="search" placeholder="Search Twitter" v-model="search" />
<div v-if="search.length > 0">
  <ul v-for="user in filteredUsers" :key="user.id">
    <li @click="userPageLink(user.id)">
      {{ user.firstName + " " + user.lastName }}
    </li>
  </ul>
</div>
</template>

<script>
computed: {
    users() {
      return this.$store.getters["user/user"];
    },
    filteredUsers() {
      return this.users.filter(
        (user) =>
          user.firstName.toLowerCase().indexOf(this.search) !== -1 ||
          user.lastName.toLowerCase().indexOf(this.search) !== -1
      );
    },
  },
methods: {
    userPageLink(id) {
      const url = `${this.$route.path}/${id}`;
      this.$router.push(url);
    },
  },
</script>

有些事情告诉我，我做的事情完全错了，我需要从 url 中获取 ID 吗？

Answer 1

如 vue-router 的 official docs 中所述，简洁的做法是：

router.push({ name: 'user', params: { userId } }) // -> /user/123

但是你的插值也很好，可能不是最明确的写法。
至少到目前为止，我没有发现代码有任何问题。

Answer 2

所有其他答案都是正确的。我会为以后遇到这个问题的用户写一些代码。

对于您的特定问题，@kissu 的回答就足够了。但是您可以用不同的方式完成您的代码。

那么让我们进入代码。

假设我们有这个路由器代码

{
    path: 'user/:id',
    name: 'user',
    params: {id: 0} //no need to set this here
    component: Component,
}

如果您对参数进行 $router.push 解析，路由器应该能够将您的 :id 更改为您想要的路径，例如 localhost:8080/user/12345。下面的代码完成了这项工作。

this.$router.push({name: 'user', params: {id: '12345'}})

但是你可以告诉 Vue Router 你的参数也是 props。为此，您可以将路由器代码更改为此

{
    path: 'user/:id',
    name: 'user',
    props: true // see that we replace the params with props
    component: Component,
}

关键 props 意味着您可以使用参数，因为它们是组件中的道具。您可以了解更多相关信息 here

现在在你的组件中，你需要设置这些属性

export default {
  name: 'User',
  components: {},
  props: {
    id: { // This is the param that we are putting in our url
      type: Number,
      default() {
        return 0
      }
    },
  },
  data(){
    return{
           user: {}
          }
  },
  created(){
    this.fetchUser();
  }
  methods: {
    fetchUser(){
      if (this.id){
        console.log(this.id)
      }
    }
  }
}

当您创建组件时，如果参数中的 id 存在，您将获取用户，他会打印它。

这是路由器实现的一个基本示例，但如果您不想显示它并将其解析到组件，您可以进一步将用户 ID 隐藏在 URL 中，缺点是这种方法是每次重新加载页面时信息都会丢失。但是如果你想这样做，你只需要改变你的 path 和你的 $router.push()

路由器文件

{
    path: 'user/:name', // we change the id to name (can be anything)
    name: 'user',
    props: true 
    component: Component,
}

路由推送

this.$router.push({name: 'user', params: {id: '12345', name: 'Joe'}})

用户组件

props: { // Both Params are present in $route but only name is in path
    id: {
      type: Number,
      default() {
        return 0
      }
    },
    name: { // This is the param that we are putting in our url
     type: String,
     default(){
        return ''
        }
    }
  },

这样您的用户只能在他的 URL <nameWebSite>/user/joe.

中看到

如果您出于任何原因想要从“/user/:id”导航到“/user/:id”并且不想保留导航历史记录，我建议您使用 $router.replace()与 $router.push() 相同，但替换当前条目

我希望这个答案能帮助你了解更多细节，以及其他后来遇到相同类型问题的人。

提示：如果你想完全避免解析参数抛出你的路由器，你可以检查 Vuex

如何重定向到选定用户的页面 VueJS？

How to redirect to the selected user's page VueJS?

javascript

vue.js

vue-router