router push with params

$router.push를 통해서 화면 이동시, parameter를 같이 전달 할 필요가 있는 경우 사용

 

인터넷에서는 컴포넌트의 속성값을 만들고 전달하라고 하는데.. 미리 정의하는것도 쉽지 않고,

인위적으로 $router.push()를 이용하는 경우, 사용이 어렵다.

 

Router를 통한 parameters 전달 방법

1) Path를 통한 값 전달

this.$router.push('/orderexec?status='+value)

위과 같이 전달 가능하고, 여러개의 값을 전달하고 싶은경우, key=value&key=value*key=value... 형태로 추가해 주면 됨.

 

전달 받은 component에서 parameters 읽는 법.

this.$route.query.{key}
ex)
this.$route.query.status

위 전달했던 router의 key 값으로 조회 하면 됨.. 

단 읽을때는 route.query 로 읽어야 함.

 

2) params를 이용한 전달 방법

  경로에 param값을 노출시키지 않고 싶을때, 혹은 다량을 정리해서 넘기고 싶을때 사용

   단, 새로 고침시에는 값이 유지 되지 않으니까 주의 필요 !!

 

   params로 넘길때는 path로 넘기면 안되고. component name으로 넘겨야함, Path로 넘기면 그냥 삽질만 해야 함. 동작 안함.

this.$router.push( { name: 'OrderExecute', params: { status: value}})

멀티의 경우, key: value..... 추가

 

전달 받은 component에서 parameters 읽는 법

this.$route.params.{key}
ex)
this.$route.params.status

query 대신 params를 사용하면 됨..

단 주의할 점은 reload시 사라짐..

 

끝!!