vue-router 帶有名稱的路由不存在

Question

我有一個包含方法的vue組件，該方法包含嘗試推送到另一個vue組件的此路由器推送：

獲取動物.vue ：

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

我有這個路由器的映射：

路由器.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')
        }

獲取動物.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'})

如果您不想 go 通過命名所有路由，您可以將路由路徑推送為router.push({ path: '/viewanimal' }) ，但命名路由是更干凈的方法。