정적 라우팅

Nuxt.js에서는 pages 디렉토리에 파일을 작성하여 자동으로 루트를 설정합니다.

기본적으로 pages/index.vue가 존재하며,http://localhost:3000/ URL에 액세스하여 페이지를 확인할 수 있습니다.

pages/index.vue

<template>
  <div>
    <h1>/index</h1>
  </div>
</template>

그럼 pages/test.vue 를 만들어 보겠습니다.

이 경우 URL은 http://localhost:3000/test입니다.

pages/test.vue

<template>
  <div>
    <h1>/test</h1>
  </div>
</template>

다음으로 pages/users/index.vue 를 만들어 보겠습니다.
URL은 http://localhost:3000/users입니다.

이러한 디렉토리의 계층 구조가 되어도 자동적으로 루트가 설정되어 있습니다.

pages/users/index.vue

<template>
  <div>
    <h1>/test</h1>
  </div>
</template>

동적 라우팅

_id.vue라는 파일을 만들어 동적 라우팅을 설정할 수 있습니다.
pages/users/_id.vue 를 작성합니다.

URL : http://localhost:3000/users/********（任意のID）******** 에 무엇을 입력해도 괜찮습니다.
적당히 넣자.

pages/users/_id.vue

<template>
  <div>
    <h1>/users/_id.vue</h1>
  </div>
</template>

그럼 ******** 의 부분을 취득하고 싶습니다.
$route.params.id 에서 ******** 의 부분을 얻을 수 있습니다.

pages/users/_id.vue

<template>
  <div>
    <h1>{{$route.params.id}}</h1>
  </div>
</template>

계속해서 링크를 붙여 페이지간을 천이시켜 갑니다.

NuxtLink

모든 페이지에 링크를 만들고 싶기 때문에 layouts/default.vue 에 네비게이션 메뉴를 만듭니다.

페이지 간 전환을 수행하려면 Nuxt.js에서 제공하는 NuxtLink 구성 요소를 사용합니다.
<NuxtLink></NuxtLink>
layouts/default.vue

<template>
  <div>
    <hr>
    <NuxtLink to='/'>/index</NuxtLink>
    <NuxtLink to='/users'>/users/index</NuxtLink>
    <NuxtLink to='/users/適当'>users/:id</NuxtLink>
    <hr>
    <Nuxt/>
  </div>
</template>

router.push 버튼을 눌렀을 때 등에 페이지를 천이시키고 싶은 경우는 router.push 를 사용할 수 있습니다. layouts/default.vue <template> <div> <hr> <NuxtLink to='/'>/index</NuxtLink> <NuxtLink to='/users'>/users/index</NuxtLink> <NuxtLink to='/users/적당'>users/:id</NuxtLink> <br> <button @click="$router.push('/')">/index</button> <button @click="$router.push('/users')">/users/index</button> <button @click="$router.push('/users/적당')">users/:id</button> <hr> <Nuxt/> </div> </template> 덤 페이지에서 ID를 지정하여 전환하는 앱 layouts/default.vue <template> <div> <hr> <NuxtLink to='/'>/index</NuxtLink> <NuxtLink to='/users'>/users/index</NuxtLink> <NuxtLink to='/users/적당'>users/:id</NuxtLink> <br> <button @click="$router.push('/')">/index</button> <button @click="$router.push('/users')">/users/index</button> <button @click="$router.push('/users/적당')">users/:id</button> <br> /users/<input type="text" v-model="id"><button @click="goTo">전이</button> <hr> <Nuxt/> </div> </template> <script> export default { data() { return { id : '' } }, methods: { goTo() { this.$router.push(`/users/${this.id}`); this.id=''; } } } </script> 이상입니다. 여기까지 봐 주셔서 감사합니다!