时间戳

首页 > 解决方案 > 如何重定向到所选用户的页面VueJS？

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

问题描述

我有一个 Twitter 的克隆，我在那里添加了一个实时搜索，但我不知道如何将所需的 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 吗？

标签： javascriptvue.jsvue-router

解决方案

所有其他答案都是正确的。我将为将来遇到此问题的用户编写一些代码。

对于您的特定问题，@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 你的参数也是道具。为此，您可以将路由器代码更改为此

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

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

现在在您的组件中，您需要设置这些道具

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 存在，您将获取用户，他会打印它。

这是路由器实现的一个基本示例，但是如果您不想显示它并解析到组件，您可以更进一步并在 URL 中隐藏用户 ID，这种方法的缺点是每次重新加载页面时该信息丢失。但如果你想这样做，你只需要改变你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

推荐阅读