当我使用相同的用户名时如何不使用 :key=”$route.path”答案

【问题标题】：How to not use :key=”$route.path” when I am in same username当我使用相同的用户名时如何不使用 :key=”$route.path”
【发布时间】：2021-09-10 20:36:13
【问题描述】：

当我在用户配置文件中并尝试转到另一个配置文件时，我遇到了一个问题，URL 更改但组件没有重新加载，所以我使用 :key="$route.path" 来重新加载组件，但每个用户配置文件都有问题不同的 URL，例如 about 和 photos 以及不同的事情，问题是当我在 about 和 go to photos 组件重新加载时

我的目的是什么

当我在同一个 $route.params.username 中时，我怎么不能使用 :key="$route.path"

我的个人资料组件

   <div class="profile-menu-top">
{{user.username}}
{{user.num_followers}} followers
  </div>

    <div class="profile-menu">
      <router-link :to="{ name: 'Account', params: { username:  $route.params.username}}" class="profile-menu-link ">Timeline</router-link>
      <router-link :to="{ name: 'UserAbout', params: { username: $route.params.username }}" class="profile-menu-link ">About</router-link>
      <router-link :to="{ name: 'MyAccount'}" class="profile-menu-link ">Videos</router-link>
      <router-link :to="{ name: 'MyAccount'}" class="profile-menu-link ">Posts</router-link>
    </div>
  </div>

路由器索引

    {
path: '/u/:username',
name: 'Account',
component: Account,
},

个人资料

<Profile v-if="userAccount" :key="$route.path" />

【问题讨论】：

您可以在 Account 组件中使用 vue-router 的 'beforeRouteUpdate' 在切换到新用户时触发。我可能会将user 作为道具从帐户传递到配置文件，而不是依赖于使用路由参数重新渲染并在配置文件中获取数据，以防止不必要地重新渲染某些 DOM 节点以及能够获取数据在切换之前，为您节省一个加载屏幕。 router.vuejs.org/guide/advanced/navigation-guards.html
@Excalibaard 你能告诉我在哪里可以添加这个，因为我在 vue 中有点不习惯
欢迎来到 StackOverflow，如果您的答案可以接受，请在有机会时将其标记为已选择。
好的，明天可以将此答案标记为可接受。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

我可以通过添加<Profile v-if="userAccount" :key="$route.params.username" />来解决这个问题

感谢@ShayaUlman，您的回答帮助我解决了问题

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，一个简单的解决方案是在密钥中添加用户 ID（或名称）：

<Profile v-if="userAccount" :key="userAccount.id" />

【讨论】：

@Ahmed，如果这有帮助，请告诉我
您好，在用户属性中导航时仍然会重新加载配置文件组件
所以您不希望用户在配置文件中导航时重新加载组件？为什么不只使用密钥中的 id（或名称）？ :key="userAccount.id"
在相同的用户名参数中是
它不会重新加载配置文件组件，但是当我要使用不同的用户名时，url 会更改，但组件并没有重新加载它仍然使用相同的用户名