vue router 쉽게 사용하기 params, query, state

vueuse를 이용해서 빠르게 사용하기

Apr 29, 2024

라우터를 사용하면서 제일 유용하게 썻던 params, query, state 를 사용함에 있어서

더 쉽고 빠르게 쓰는 방법을 정리해본다.

일단 state 사용법이다.

전달 방법은 아래와 같다.


router.push({
	path: '/router-history-state',
	state: {
		name: propsItem.value.companyName,
	},
});

받는 방법은 아래와 같다.


console.log('history.state: ', history.state);

이렇게 하면 전달한 데이터를 확인할 수 있다!

그럼 쿼리와 파람스를 받는 방법은 뭘까~?


import { useRouteQuery, useRouteParams } from '@vueuse/router';

vueuse에 useRouteQuery를 사용하면 진짜 혁명적으로 쓸 수 있다!


const clientValue = useRouteQuery('seq', null, { transform: String });
const client = useRouteQuery('client', null, { transform: String });

넘겨준 데이터를 위와 같이 받게 되면 진짜 빠르게 접목해서 사용할 수 있다.


if (response.code === Response.Success && client.value === 'null') {}

위와 같이 접목해서 바로 쓸 수 있다!~

이렇게 쓸 수 있는 vueuse 라이브러리는 진짜 혁명이니 아래의 링크를 달아드린다.