[Vue.js] vue-router 로 component 에 props data 전달하는 방법

Vue.js 를 배워보겠다고 책도 읽고 강의도 보았지만 역시 개발자는 코딩을 해봐야되나보다.. 백문이 불여일타 🙏

---

# 하게 된 계기 (tmi)
- Vue.js 프로젝트를 진행하면서 모니터링 페이지를 만들고 있는데,
각 컴포넌트의 title 이 여러 군데에서 하드코딩 되어 있는 것을 보고.... 상수처럼 한 번만 정의해보자! 하게 됨

# 검색
1. vue-router props data
2. vue-router passing data
3. vue-router access app vue data
4. component props data
.....
등등 수많은 키워드로 검색했지만 거의 다 공식홈페이지에 있는 내용이라서 도움이 되지 못했다 😥

---

vue-router 로 각 component 가 연결된 상태

나는 App.vue 에서 data 로 각 컴포넌트의 title 을 정의하고,
하드코딩을 하고 있던 지점(사이드바, 컴포넌트 내부) 에서 정의한 title 을 사용하도록 원했다.

 

<!-- App.vue -->
<!-- #1. 사이드바에서 메뉴명 하드코딩 제거!! -->
<template>
  <사이드바 :to="{ name: 'aComponent', params: { pageTitle: aComponentTitle }}">{{ aComponentTitle }} </사이드바>
  <사이드바 :to="{ name: 'bComponent', params: { pageTitle: bComponentTitle }}">{{ bComponentTitle }} </사이드바>
  ...
</template>
<script>
  name: 'App',
  data: function() {
    return {
      aComponentTitle: '1번',
      bComponentTitle: '2번'
    }
  }
</script>


<!-- vue-router -->
<script>
  export default new Router({
    mode: 'history',
    routes: [
      {
        name: 'aComponent', 		//= :to 에 정의한 name
        path: '/aComponentMain',
        component: aComponentMain,
        props: true 			//= 핵심
      },
      {
        name: 'bComponent',
        path: '/bComponentMain',
        component: bComponentMain,
        props: true
      }
    ]
  })
</script>

<!-- aComponent -->
<!-- #2. 컴포넌트 내부에서 노출하는 메뉴명 하드코딩 제거!! -->
<template>
  <div>{{ pageTitle }}</div>
</template>
<script>
  export default {
    ...
    props: ['pageTitle']
    ...
  }
</script>