Vue [10-2] vue-router를 이용한 라우팅

[1] 동적 라우트

◈ 동적 라우트(Dynamic Route)

- 일정 패턴 가진 URI 경로를 하나의 라우트에 연결하는 방법

- URI 경로 일부에 실행 필요한 파라미터 값 포함

ex) URI 경로가 /user/user1, /user/user2, /user/user3 인 경우, 

vue-router 객체에서

const currentRoute = useRoute();

const username = computed(() => currentRoute.params.username);

 

위와 같이 이용 가능

username.value (username) 에는 user1, user2, user3 의 값이 각각 저장됨

 

[2] 중첩 라우트

◈ 중첩 라우트 (Nested Route)

- 화면 전환 없이 화면 중첩시켜 보고 싶은 경우 사용 (기본은 화면을 완전히 전환)

- 팝업 화면 구성 시 주로 用

 

[3] 명명된 라우트와 명명된 뷰

◈ 명명된 라우트(Named Route)

- 라우트 정보에 이름 부여하는 방법

- URI 경로 x 이름 이용해 경로 전환

 

◈ 라이브러리 추가

- youtube-vue3 : 유튜브 영상 재생 라이브러리, npm install youtube-vue3로 설치

 

◈ 비디오 재생 목록

- src/videos.json

- App에서 해당 데이터 provide 하고, Videos.vue에서 inject 해서 비디오 목록 사용

 

◈ query.params

URI 패턴	<router-link>의 예
/members/:id	ex) /members/1 <router-link :to="{ name:'members/id', params: { id: 1 } }"> ... </router-link>
/members?a=1&b=2	<router-link :to="{ name: 'members', query: { a:1, b:2 } }"> ... </router-link>

 

◈ 명명된 뷰(Named View)

- <router-view>에 중첩시키지 x , but 화면에 한꺼번에 나타내는 경우 用