inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

ToolBar의 라우터 링크 스타일링

`router-link` 에 `to` 가 아닌 `v-bind:to` 를 사용해야하는 이유가 무엇인가요?

해결된 질문

1173

mkp0131

작성한 질문수 91

1

router-linkto 가 아닌 v-bind:to 를 사용해야하는 이유가 무엇인가요? 가

파라미터(:id) 가 들어가서 그런건가요??

vuejs javascript

답변 2

3

milee267

기효님께서 답변 또 달아주시겠지만 지나가다가 답변 달아봅니다.

-

아래와 같이 이용하면

<router-link to="/주소1/주소2">클릭</router-link>

to에는 문자열만 입력 가능하고 변수 사용이 불가능 합니다.

-

기본적으로 template에서 사용하는 모든 태그들안에는 변수 사용이 불가능 하지만 변수를 사용할 수 있도록 도와주는 것이 v-bind 입니다.

따라서 동적인 주소 사용을 위하여 아래와 같이 사용하는 것이죠

<router-link v-bind:to="`/user/${item.id}`">클릭</router-link>

또한 v-bind: 는 v-bind 제외하고 : 하나로 아래와 같이 축약이 가능합니다.

<router-link :to="`/user/${item.id}`">클릭</router-link>

 

v-bind와 같이 v-xxxx으로 생긴 내장 기능들을 여러가지 있습니다.

아래는 v-blind 공식 문서 이며 참고하셔요

https://vuejs.org/api/built-in-directives.html#v-bind

0

mkp0131

답변 감사합니다 : )

1

캡틴판교

안녕하세요, milee님께서 자세하게 답변을 잘 달아주셔서 제가 따로 설명 안드려도 되겠네요 :) 강의 들으시면서 추가로 궁금하신거 있으면 알려주세요. 감사합니다 milee님 :)

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

144

1

깃허브 권한 요청 드립니다

0

160

1

깃허브 권한 요청 드립니다

0

167

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

207

1

ide 타입추론 기능 사용할 수 없을까요??

0

205

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

228

1

Vue3로 진행중입니다

1

338

1

Vue router-link 사용시 같은 url이면

1

506

1

vue3 에러 메세지...

1

670

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

318

2

깃허브 권한 요청드립니다.

1

358

2

권한요청드립니다.

1

299

2

Vue3에서 구글 애드센스 탑재하기

1

435

2

코드가 정상 작동 되는건지 ...

1

302

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

243

1

vuex 적용시 질문

1

285

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

377

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

451

2

권한요청 드립니다!

1

270

2