Vue Router params 데이터 처리 방법

---

Vue 페이지를 호출할 경우 하나의 params 또는 여러개의 params를 전달해야 할 경우가 있다. 

여러가지 방법이 있지만 개인적으로 사용한 방법을 공유한다.

예를 들어
분류 코드가 대/중/소 3가지로 분류되었을 경우 params 를 대/중/소 3개를 넘겨줘야 한다. 

Vue Router를 사용하여 대/중/소를 large/mid/small 로 넘겨준다고 가정할때 

<a :href="`/code/large/${largecode}/mid/${mid}/small/${small}/`">Code </a> 로 호출하고

Vue Router 에는

{ path: '/code/large/:lg/mid/:md/small/:sm', name: 'CodeVue', component: CodeVue },

위와 같이 작성하면 된다. 

물론 Router에는 
CodeVue.vue 페이지를 import로 선언해야 한다. 

 

CodeVue.vue 페이지에서는 

<template>
<div>
	Large: {{$route.params.lg}}, 
    Mid:   {{$route.params.md}},
    Small: {{$route.params.sm}}
</div>
</template>

 

위와 같이 확인하면 Vue Router를 통해 params 값이 전달된 것을 확인할 수 있다.