[Vue.js] 영화 검색 사이트 예제 - 03. Header_Nav

참조) Navs and tabs · Bootstrap v5.1 (getbootstrap.com)

Navs and tabs

위의 Pills 객체를 이용하여 네비게이션 헤더를 만들 것이다.

 

1. Header.vue 작성

/src/components/에 다음과 같은 내용으로 Header.vue를 만든다.

RouterLink는 a태그와 유사한 기능을 수행하는 태그다.

2. App.vue에 Header.vue 삽입

각각의 버튼을 눌러 잘 이동되는지를 확인한다.

3. 추가 작업

Pills를 사용했으나 구현된 페이지에서는 효과가 제대로 적용되지 않았다.

그 이유는 pills는 active 속성이 붙어야 제대로 동작하기 때문이다.

실제로 구현된 페이지에서 F12를 눌러 태그를 살펴보면 다음과 같이 활성화 된 태그에 추가적인 속성이 붙는다.

이 추가적으로 붙는 속성을 제어해주면 된다.

참조) API Reference | Vue Router (vuejs.org)

API Reference | Vue Router

 

Vue-router 문서를 확인하면 위와 같이 active-class 속성을 확인할 수 있다.

따라서 이 속성을 Header.vue의 RouterLink 태그에 추가해주면 된다.