Vue route의 의존성 해제 간단 정리 | props 속성 허용

route의 props를 허용하여 라우트 컴포넌트에 속성 전달

🔓$route에 의존된 컴포넌트

const routes = [{ path: '/user/:id', component: User }]

- 컴포넌트에서 $route객체(param 등)를 사용하면 특정 url에서만 사용할 수 있게 되어서 의존적이다.

(url이 '/user/tay' 에서만 'tay'에 대한 User 컴포넌트를 가져올 수 있음)

즉, 해당 url이 아닌 곳에서는 User 컴포넌트를 불러올 수 없게 된다.

 

 

🔓속성을 전달하여 $route에 의존성 해제

const routes = [{ path: '/user/:id', component: User, props: true }]

- 필요에따라 어디서든 컴포넌트를 사용할 수 있도록 하려면 route에 props: true를 설정한다.

(url이 '/user/tay' 아닌 곳에서도 User 컴포넌트를 불러올 수 있다.)

 

<UserView :id="tay"></UserView>

- 필요한 :id는 속성으로 전달하여 해결

 

 

🔓props의 다양한 설정 방법

1. Boolean으로 설정하기

props: true

- boolean 값에 따라 route.params가 컴포넌트의 props로 설정된다.

 

2. 객체로 설정하기

props: { newsletterPopup: false }

- 컴포넌트의 props가 객체 그대로 정적으로 설정된다.

- props가 정적일 때 유용하다.

 

3. 함수로 설정하기

props: route => ({ query: route.query.q })

- props를 반환하는 함수를 만들고 반환 값에 따라 설정된다.

- 전달인자를 다른 타입으로 캐스팅할 수 있음