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
          }

---animal参数好像没有传递。我不确定是路由器的路径/名称问题还是其他问题---。

更新：

设法使它工作。这应该在GetAnimal.vue:

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

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' })，但命名路由是更干净的方法。