[Vue3] Vue Router Error 동적 라우팅 오류 - Uncaught (in promise) Error: Missing required param

dhkim 12월 05, 2023

 



 이번 포스팅에서는 동적 라우팅 구성 간에 있었던 오류와 처리 방법에 대해서 다룹니다.


Uncaught (in promise) Error: Missing required param "id"

    at Object.stringify (vue-router.mjs:989:1)

    at Object.resolve (vue-router.mjs:1448:1)

    at Object.resolve (vue-router.mjs:3058:1)

    at ReactiveEffect.eval [as fn] (vue-router.mjs:2169:1)

    at ReactiveEffect.run (reactivity.esm-bundler.js:178:1)

    at get value [as value] (reactivity.esm-bundler.js:1147:1)

    at useLink (vue-router.mjs:2212:1)

    at setup (vue-router.mjs:2258:1)

    at callWithErrorHandling (runtime-core.esm-bundler.js:158:1)

    at setupStatefulComponent (runtime-core.esm-bundler.js:7236:1)






1. 예제 설명 및 에러 케이스

    비동기(API)로 획득한 자료를 매개변수로 삼는 동적 라우팅을 구성하는 예제.
    이 경우, "router-link"를 렌더링하는 시점이 인자(params)를 회신받는 시점보다 빨라 정상적인 "router-link"를 생성하지 못하며 위와 같은 오류가 발생한다.


[라우팅 정보 (index.js)]
: 비동기(API)로 획득하는 사용자(user) 정보 중, 'id'값을 매개로 "UserView"로 전환함.
1
2
3
4
const routes = [
    { path: `/`                 , redirect: { name: 'home' } },
    { path: `/${base_url}/user/:id` , name: 'user'   , component: UserView  },
];


["router-link" 구현 부 (NewView.vue)]
1
2
3
4
5
6
7
<template>
    <p v-for="item in this.$store.state.news" v-bind:key="item">
        <router-link :to="{ name: 'user', params: { id: item.user } }">
            {{ item.user }} 
        </router-link>
    </p>
</template>


[응답 자료형 - Vuex : news]



2. 해결 방안

    1) v-if 를 통한 조건 부 렌더링    

        v-if 디렉티브를 통해 인자인 "item.user"를 조건으로 값이 존재할 경우에만 렌더링 하도록 한다.
        
["router-link" 구현 부 (NewView.vue)]
1
2
3
4
5
6
7
<template>
    <p v-for="item in this.$store.state.news" v-bind:key="item">
        <router-link v-if=item.user :to="{ name: 'user', params: { id: item.user } }">
            {{ item.user }} 
        </router-link>
    </p>
</template>


    2) 템플릿 리터럴 형태의 구현

        to 속성을 템플릿 리터럴 형태로 구현한다.
        비동기 응답 이 후, 연산된 값이 적용되므로 렌더링 시점에 영향을 받지 않는다.

["router-link" 구현 부 (NewView.vue)]
1
2
3
4
5
6
7
<template>
    <p v-for="item in this.$store.state.news" v-bind:key="item">
        <router-link :to="`/user/${item.user}`">
                {{ item.user }} 
        </router-link>
    </p>
</template>




3. 주의사항 (Tomcat으로 배포된 프로젝트)

    : "2) 템플릿 리터럴 형태의 구현"과 같은 방법으로 조치했을 때 Tomcat으로 배포된 경우,
이전 포스팅([Vue.js] Apache Tomcat 배포하기 - 새로고침 404 오류 해결)과 같이 경로에 대한 문제를 직면할 수 있다. 

이 경우, 'baseURL'로 지정한 값을 문자열 리터럴 경로에 포함하여야 한다.


0 댓글