How to not use :key=”$route.path” when I am in same username

user_15430010 0
Viewed 168

I faced a problem when I am in user profile and tried to go to another profile the URL change but the component doesn’t reload so I used :key="$route.path" in order to reload the component but there are problems each user profile have different URLs like about and photos and different things the problem is when I am in about and going to photos the component reload

What my purpose

how I can don’t use :key="$route.path" when I am in the same $route.params.username

My profile component

   <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>

the router index

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

The profile

<Profile v-if="userAccount" :key="$route.path" />
vue-router vuejs2 vue-component vue.js
2 Answers

If I understood your problem correctly, a simple solution will be to add the user id (or name) the the key:

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

I could solved this problem by add <Profile v-if="userAccount" :key="$route.params.username" />

Thanks @ShayaUlman your answers helped me to solve problem

user_154300100
Related