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

GetAnimal.vue:

...
this.$router.push({
    name: "/viewanimal",
});
...

I have this mappings for the router:

router.js:

{
    path: "/viewanimal",
    ponent: () => import('./views/DisplayAnimal.vue')
},
{
    path: "/getanimal",
    ponent: () => 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",
            ponent: () => import('./views/DisplayAnimal.vue')
        },
        {
            path: "/getanimal",
            name: "getanimal",
            ponent: () => 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
                     }
                 });

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

GetAnimal.vue:

...
this.$router.push({
    name: "/viewanimal",
});
...

I have this mappings for the router:

router.js:

{
    path: "/viewanimal",
    ponent: () => import('./views/DisplayAnimal.vue')
},
{
    path: "/getanimal",
    ponent: () => 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",
            ponent: () => import('./views/DisplayAnimal.vue')
        },
        {
            path: "/getanimal",
            name: "getanimal",
            ponent: () => 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
                     }
                 });

• javascript
• vue.js
• vuejs2
• vue-router

• Is the given answer worked? – Kiran Maniya Commented May 29, 2020 at 4:48
• 3 It should be this.$router.push({ path: '/viewanimal' }) or this.$router.path('/viewanimal'). – tony19 Commented May 29, 2020 at 4:50
• @tony19 No. This: stackoverflow./a/50082888/4759176 says that if I want to pass parameters path won't work and I must use name instead. – parsecer Commented May 29, 2020 at 5:33
• @parsecer That intention was not apparent in your original question, which had no parameters. – tony19 Commented May 29, 2020 at 5:45

1 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",
        ponent: () => import('./views/DisplayAnimal.vue')
    },
    {
        path: "/getanimal",
        name: "animal.get",
        ponent: () => 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.