vue-router名称不存在的路由

Question

我有一个vue组件，其中包含一个方法，该方法包含此路由器推送，它尝试推送到另一个vue组件：

GetAnimal.vue：

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

我有此路由器的映射：

router.js：

{
    path: "/viewanimal",
    component: () => import('./views/DisplayAnimal.vue')
},
{
    path: "/getanimal",
    component: () => import('./views/GetAnimal.vue')
}

但是，当执行GetAnimal.vue中的代码时，我会在控制台中得到这个：

然后我被定向到http://localhost:8080/。

我也尝试过

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

但是它也不起作用。

编辑：

我尝试过：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
          }

动物参数似乎未传递。我不确定路由器的路径/名称问题还是其他问题？

Answer 1

您必须在router.js文件中将路由定义为命名路由。您的路线缺少name属性。对于命名路由，必须具有name属性。它应该像给定的示例，

const router = new VueRouter({
  routes: [
    {
        path: "/viewanimal",
        name: "animal",
        component: () => import('./views/DisplayAnimal.vue')
    },
    {
        path: "/getanimal",
        name: "animal.get",
        component: () => import('./views/GetAnimal.vue')
    }
  ]
})

关注name属性，这是您可以在给定的模板中使用的路由名称，

<router-link :to="{ name: 'animal'}">Animals</router-link>

或者，这是推送新路线的代码，

router.push({ name: 'animal'})

如果您不想命名所有路由，可以将路由路径推为router.push({ path: '/viewanimal' })，但是命名的路由更干净。