My issue involves a vue component with a method that includes a router push attempting to navigate to another vue component:
GetAnimal.vue:
...
this.$router.push({
name: "/viewanimal",
});
...
The routing mapping is set up like this:
router.js:
{
path: "/viewanimal",
component: () => import('./views/DisplayAnimal.vue')
},
{
path: "/getanimal",
component: () => import('./views/GetAnimal.vue')
}
However, upon executing the code in GetAnimal.vue, I encounter this error in the console:
https://i.sstatic.net/XOCME.png
This leads me to be redirected to http://localhost:8080/.
I have also attempted:
...
this.$router.push({
name: "viewanimal",
});
...
without success.
EDIT:
I've made attempts at the following: 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. Not sure if it's related to the router's path/name setup or another factor---.
UPDATE:
Successfully resolved the issue. The correct implementation in GetAnimal.vue should be:
this.$router.push({
name: "viewanimal",
params: {
animal: this.animal
}
});