VueJS-다른 ID로 동일한 구성 요소를로드하기 위해 하나의 라우팅 경로를 사용하는 방법

세 개의 파일이 router.js있으며 다음 App.vue과 Contents.vue같습니다.

router.js:

{
  path: '/views/frames/viewContentId1',
  name: 'letsCheck1',
  component: () => import('./views/frames/Contents.vue'),
  props: {
    id: '1'
  }
},
{
  path: '/views/frames/viewContentId2',
  name: 'letsCheck2',
  component: () => import('./views/frames/Contents.vue'),
  props: {
    id: '2'
  }
},

App.vue:

<div class=" Button to display content of Id1">
  <vs-button @click="$router.push({name: 'letsCheck1'}).catch(err => {})">Explore Light</vs-button>
</div>

<div class=" Button to display content of Id2">
  <vs-button @click="$router.push({name: 'letsCheck2'}).catch(err => {})">Explore Deep</vs-button>
</div>

Contents.vue:

<div class="Whole contents are present here">
  <p> Here this content is same for both the id</p>
    <span v-if="id === '1' ">Top Notch1</span>
    <span v-if="id === '2' ">Top Notch2</span>
  <p> Here again this content is same for both the id</p>
</div>
<script>
props: {
  id: String,
  required: true
}
</script>

실제로 코드를 router.js. id두 번 지정 했지만 id약간의 변경 사항으로 표시 할 동일한 정보를 더 추가하고 싶다고 가정합니다. 에서 볼 수 있듯이 지시문 Contents.vue을 사용하여 약간의 변경 사항을 표시했습니다 v-if.

따라서 경로를 한 번만 정의 할 수있는 방법과 id버튼에을 지정하는 방법을 알고 싶습니다 id.