vue-router Route with name does not exist

Question

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
                     }
                 });

Answer 1

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.