[ Nuxt ] nuxt-link 다양하게 사용하기 !

 

** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! **

 

 

 

페이지를 연결할때 (이동시킬 때 ) 사용하는 <nuxt-link>는 <router-link>와 같은 역할을 한다.

 <a href=".."... />  의href와 같이 to를 이용해  <nuxt-link to=".." .../>  형태로 사용한다

화면에 그려지고 난 뒤에는 아래와같이 a태그로 보여진다

 

이름을 가진 라우터를 사용할때나 데이터 값을 넣어 사용할때에는 v-bind:to=".." 를 사용한다

 

Props 사용하기

1 . replace

( 기본값 false )  클릭할 때 router.push() 대신 router.replace()를 호출

뒤로가기를 하더라도 히스토리 레코드를 남기지 않으므로 이전 화면으로 돌아가지 않는다

<nuxt-link :to="{ path: '/post'}" replace></nuxt-link>

 

2 . append

 

( 기본값 false ) 

항상 상대 경로가 현재 경로에 추가된다.

 

ex )

예를들어 현재 경로가   www.test.com/home   이였을때

아래 nuxt-link를 클릭하면   www.test.com/home/post  의 형태로 뒤에 추가된다

<nuxt-link :to="{ path: '/post'}" append></nuxt-link>

/* 아래처럼도 사용 가능*/
router.push({ path: 'post', append: true })

 

3 . tag

( 기본값 a ) 

a태그가 아닌 다른태그로 변경해 사용 할 수 있다

<nuxt-link to="/text" :to="{ path: '/post'}" tag="li">TEST</nuxt-link>

//아래와 같이 렌더링된다  to는 필수!!
<li>TEST</li>

 

4 . exact

 

( 기본값 false ) 

주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여줍니다.

<!-- 아래 링크는 정확히 `/test` 에서만 active 된다 -->

<router-link to="/test" exact>
//  test?id=1  <-과 같은 형태에선 나타나지 않는다

 

 

---

✔︎참고

router.vuejs.org/kr/api/#exact

jeonghwan-kim.github.io/2018/04/07/vue-router.html