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
– tony19, Commented May 29, 2020 at 4: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
– parsecer, Commented May 29, 2020 at 5:33
@parsecer That intention was not apparent in your original question, which had no parameters. — tony19
– tony19, Commented May 29, 2020 at 5:45

Kiran Maniya · Accepted Answer · 2020-05-29 05:01:28Z

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, 2020 at 5:01

answered May 29, 2020 at 4:44

Kiran Maniya

9,08911 gold badges63 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

parsecer Over a year ago

This: 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 Over a year ago

Please see the edit on my question - I tried to adapt your code, but it doesn't seem to be working with parameters

Kiran Maniya Over a year ago

Either you use named route or path, passing parameter works both ways. Well, your code is now working and that's an important thing:)

Collectives™ on Stack Overflow

vue-router Route with name does not exist

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related