CODEWITHSUNDEEP
vue.js
Valentine
Valentine

Reputation: 161

Vue Router does not redirect to the right page

When I try to push a new profile with an profileID with VueRouter I get an error saying: Avoided redundant navigation to current location: "/user/ID". When clicking on the button it is not redirecting me to another page, it just jumps to the beginning of the current page.

I declared my routes in my index.js file like this:

const routes = [
    {
        path: '/',
        name: 'EntryPoint',
        component: EntryPoint
    },
    {
        path: '/main',
        name: 'Main',
        component: Main
    },
    {
        path: '/user/:id',
        name: 'User Current',
        component: CurrentUser
    },

When I am on an user page the path in the url already contains an userID - so f.e. #/user/1111.

Now on the same user page I want to navigate to another user when the user clicks on a button:

 <ContactCard
          v-for="user in users"
          @goToUser="goToUser(user.id)"
        />

goToUser(userId) {
      this.$router.push({ name: "User Current", params: { id: userId } });
    },

The id which I get from my users array contains different id´s for each user.

Any suggestions why the routing is not working properly?

When clicking on the button I see for an instance that the url is changing with the right path: #/user/1112. Inseatd of updating the page it removes the url, jumps to top and gives me the error message from above when selecting the button again.

When I log

console.log(this.$route.path);

on button click I get the correct route - /user/ID but it is not updating anything.

UPDATE:

As Zdravko Pernikov suggested I keyed my and it works:

<template>
    <div id="app">
        <div id="nav">
            <label>Welcome</label>

            <router-link to="/main">Welcome</router-link>

            <router-link to="/User">User</router-link>

        </div>
        <router-view :key="$route.path"/>
    </div>
</template>

Upvotes: 1

Views: 3050

Answers (1)

dako
dako

Reputation: 1163

This may happen because you are reusing your CurrentUser component and you are not listening for changes since it's already rendered. You can try keying your global router view <router-view :key="$route.path"></router-view> your components will be rerendered on different routes.

Upvotes: 3

Related Questions