[Vue] router-link

 

뷰의 router에서 제공하는 컴포넌트

유저가 해당 부분을 누르면 라우터를 통해 해당 페이지 전환을 처리함 

새로고침을 하지 않고 화면을 새로운 거로 재랜더링함

보통 a 태그 대신 사용한다고 보면 되고 해당 링크를 눌렀을 때 활성화한 스타일 저장을 위해 active-class속성 사용이가능 

 

 

<router-link :to="/home" active-class="active">Home</router-link>

 

1. router-link 부분을 누름 = a 

2. to속성이 href 대신으로 이동할 링크를 알려줌 

3. 해당 링크 활성화시 적용할 클래스를 active-class에 지정하면 클래스가 별도랑 "active"로 새롭게 지정이 됨

 

nav-pills클래스를 사용해서 꾸밀 수 있음 
https://getbootstrap.kr/docs/5.0/components/navs-tabs/

내비게이션과 탭