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

It should be `this.$router.push({ path: '/viewanimal' })` or `this.$router.path('/viewanimal')`. — tony19, May 29 '20 at 04:50
@tony19 No. This: stackoverflow.com/a/50082888/4759176 says that if I want to pass parameters path won't work and I must use name instead. — parsecer, May 29 '20 at 05:33
@parsecer That intention was not apparent in your original question, which had no parameters. — tony19, May 29 '20 at 05:45

Kiran Maniya · Accepted Answer · 2020-05-29T05:01:28.543

12

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.

edited May 29 '20 at 05:01

answered May 29 '20 at 04:44

Kiran Maniya

8,453
9
58
81

This: https://stackoverflow.com/a/50082888/4759176 says that if I want to pass parameters `path` won't work and I **must** use `name` instead. I tried replacing `path` with `name`: `name: "/viewanimal"` and my parameter data didn't seem to have been passed – parsecer May 29 '20 at 05:30
Please see the edit on my question - I tried to adapt your code, but it doesn't seem to be working with parameters – parsecer May 29 '20 at 05:35
Either you use named route or path, passing parameter works both ways. Well, your code is now working and that's an important thing:) – Kiran Maniya May 29 '20 at 05:47

vue-router Route with name does not exist

1 Answers1