vue -router Маршрут с именем не существует - PullRequest
Новая
       23

vue -router Маршрут с именем не существует

2 голосов
/ 29 мая 2020

У меня есть компонент vue, содержащий метод, метод содержит этот маршрутизатор pu sh, который пытается передать sh другой компонент 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, я получаю это в консоли:

enter image description here

И меня перенаправляют на http://localhost:8080/.

Я также пробовал 

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

, но это тоже не работает.

EDIT :

Я пробовал : маршрутизатор. 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
          }

--- Кажется, параметр животного не был передан. Я не уверен, что это проблема в пути / имени маршрутизатора или в чем-то еще ---.

ОБНОВЛЕНИЕ :

Удалось заставить его работать. Это должно быть в GetAnimal.vue: 

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

1 Ответ

3 голосов
/ 29 мая 2020

Вы должны определить маршруты как именованный маршрут в маршрутизаторе. 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>

В качестве альтернативы, здесь это код для pu sh нового маршрута, 

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

Если вы не хотите go путем присвоения имен всем маршрутам, вы можете pu sh путь маршрута как router.push({ path: '/viewanimal' }), но названные маршруты представляют собой более чистый подход.

...