Vue Router Params 전달

목록에서 상세조회로 갈 때, 스케줄의 id값을 넘겨 상세조회로 넘어가려고 한다.

// router.js
{
    path: '/schedule/detail/:id', name: 'schedule detail',
    component: () => import('@/components/schedule/ScheduleDetail.vue')
},

패스 설정에서 :id 를 사용해 상세 조회시 url에 각 스케줄의 id 값을 띄울 수 있도록 한다.

// scheduleList.vue

<script>
	async goToDetail(id){
	    try{
	      this.$router.push({
	        name: 'schedule detail',
							// key: value
	        params: { id: id }
	      })
	    }catch(error){
	      console.log(error);
	    }
	 },
</script>

목록에서 상세로 router push 를 할 때, 파라미터로 아이디 값을 함께 넘겨준다. params: { id: id }

// scheduleDetail.vue

<script>
	mounted(){
    this.getDetail()
  },
  

  methods:{
    async getDetail(){
      try{
        const data = await SchedulerApi.scheduleDetail(this.$route.params.id);
        this.job = data.result;
      }catch(error){
        console.log(error);
      }
   },
</script>

상세로 넘어와서 axios를 호출할 때 this.$route.params.id 를 사용하면 목록에서 router push 시에 넘긴 파라미터값, 즉 id 값을 가져와 사용할 수 있게 된다!