[Vue.js] router 관련 정리

vue-router 설치

$ npm i vue-router --save-dev

a vs router-link

<!-- a tag -->

<a href="/login">Login</a>

<!-- router-link tag -->

<a to="/login">Login</a>

<!-- router-link tag -->

<a :to="`/b/${bid}/c/1`">Card 1</a>

vue.js에서 router-view를 쓸 때 a 태그의 대용으로 router-link 태그를 선호합니다.

<장점>

• 클릭 이벤트를 차단하여 페이지를 다시 로드하지 않도록 합니다.
• history 모드와 hash 모드가 동일하게 작동됩니다. (/#/ 유무)

:to 를 사용하는 것은 데이터 바인딩 기능입니다. v-bind:to의 약식 표현이며 ${bid} 같은 변수를 연결한다는 의미입니다.

중첩 라우트

라우트 경로를 설정할 때 부모가 될 라우트의 속성으로 children을 넣어줍니다.

그 안에 배열을 생성해서 자식 라우트를 설정합니다.