[Vue.js] 단일 컴포넌트를 import 후 템플릿에 호출하는 방법(컴포넌트 뷰에 파라미터 값 전달 하는 방법)

검색된 리스트에서 다음과 같은 방법으로 이동할 페이지를 호출한다.

    moveNext(row) {
      this.$router.push({ name: 'userDetail', params: { userId: row.USER_ID } });
    },

UserDetail.vue 내용은 다음과 같다.

<template>  
    <UserDetailList />
</template>

<script>
import UserDetailList from '@/views/components/UserDetailList.vue';

export default {
  name: 'UserDetail',
  components: {
    UserDetailList,
  },
};
</script>

파라미터 값으로 userID라는 키값을 상세페이지에 던져서 호출하고 있으나 그 어떤 처리도 되어있지않다.

다음과 같은 방법으로 정의하여 처리한다.

템플릿 안에 컴포넌트 뷰 선언시 :userid값을 정의한다.

페이지가 created() 주기에 있을 때 라우터에서 전달 받은 userId값을 미리 선언한 변수에 set 한다.

<template>  
    <UserDetailList :userId="data.userId"/>
</template>

<script>
import UserDetailList from '@/views/components/UserDetailList.vue';

export default {
  name: 'UserDetail',
  components: {
    UserDetailList,
  },
  data: () => ({
    data: {
      userId: '',
    },
  }),
  created() {
      if (this.$route.params.userId !== undefined) {
        this.data.userId = this.$route.params.userId;
      }
  },
};
</script>

또 하나의 오류를 처리하였다. 기존 시스템에서 사용하던 것이 맞는것일까?

너무 오류 투성이다.