IT

이름을 가진 vue-router 경로가 없습니다.

itgroup 2023. 1. 31. 20:45
반응형

이름을 가진 vue-router 경로가 없습니다.

나는 가지고 있다vue메서드를 포함하는 컴포넌트, 메서드는 다른 라우터에 푸시하려는 이 라우터 푸시를 포함합니다.vue컴포넌트:

겟애니멀vue:

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

라우터에는 다음 매핑이 있습니다.

router.syslog:

{
    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
                 });

Display Animal.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
                     }
                 });

루트를 router.js 파일에서 이름 있는 루트로 정의해야 합니다.루트가 누락되어 있는 경우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')
    }
  ]
})

에 초점을 맞춥니다.nameAtribute, 이것은 지정된 템플릿에서 사용할 수 있는 루트 이름입니다.

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

혹은, 여기 새로운 루트를 푸시하기 위한 코드가 있습니다.

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

모든 루트에 이름을 붙이고 싶지 않은 경우 루트 경로를 다음과 같이 푸시할 수 있습니다.router.push({ path: '/viewanimal' })단, 이름 있는 루트가 더 깨끗한 접근법입니다.

언급URL : https://stackoverflow.com/questions/62078811/vue-router-route-with-name-does-not-exist

반응형