Question

196

vue-router Route with name does not exist

rated 0 times [ 199] [ 3] / answers: 1 / hits: 19407 / 4 Years ago, fri, may 29, 2020, 12:00:00

I have a vue component that contains a method, the method contains this router push that tries to push to another vue component:

GetAnimal.vue:

...

this.$router.push({

    name: /viewanimal,

});

...

I have this mappings for the router:

router.js:

{

    path: /viewanimal,

    component: () => import('./views/DisplayAnimal.vue')

},

{

    path: /getanimal,

    component: () => import('./views/GetAnimal.vue')

}

However when the code inside the GetAnimal.vue gets executed I get this in console:

And I get directed to http://localhost:8080/.

I also tried

...

this.$router.push({

    name: viewanimal,

});

...

but it doesn't work either.

EDIT:

I've tried:
router.js:

  {

            path: /viewanimal,

            name: viewanimal,

            component: () => import('./views/DisplayAnimal.vue')

        },

        {

            path: /getanimal,

            name: getanimal,

            component: () => import('./views/GetAnimal.vue')

        }

GetAnimal.vue:

 console.log(this.animal:  + JSON.stringify(this.animal));  //displays good JSON



                this.$router.push({

                     name: viewanimal,

                    params: this.animal

                 });

DisplayAnimal.vue:

created() {

            console.log(animal param:  +

                JSON.stringify(this.$route.params.animal)); //prints undefined

          }

---The animal parameter doesn't seem to have been passed. I'm not sure if it's the problem with the router's path/name thing or something else---.

UPDATE:

Managed to make it work. This should be in GetAnimal.vue:

    this.$router.push({

                     name: viewanimal,

                    params: {

                         animal: this.animal

                     }

                 });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalilb

Add To Favorites

Follow

Total Points: 173

Total Questions: 110

Total Answers: 105

Location: Honduras

Member since Thu, Mar 23, 2023

1 Year ago

answered 4 Years ago irvingcarloe · Accepted Answer

You have to define the routes as named route in the router.js file. Your routes missing the name attribute. For named routes, the name attribute is must. It should be like the given example,

const router = new VueRouter({

  routes: [

    {

        path: /viewanimal,

        name: animal,

        component: () => import('./views/DisplayAnimal.vue')

    },

    {

        path: /getanimal,

        name: animal.get,

        component: () => import('./views/GetAnimal.vue')

    }

  ]

})

Focus on the name attribute, this is the route name you can use in template as given,

<router-link :to={ name: 'animal'}>Animals</router-link>

Alternatively, here is the code to push new route,

router.push({ name: 'animal'})

If you don't want to go through naming all of the routes you can push the route path as router.push({ path: '/viewanimal' }), but the named routes are more clean approach.