Nuxt의 νŽ˜μ΄μ§€ λΌμš°νŒ…

λ·° μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œλŠ” λΌμš°ν„° 섀정을 μ•„λž˜μ™€ 같이 일일이 ν•΄μ€˜μ•Ό ν•˜λŠ”λ° λ°˜ν•΄ λ„‰μŠ€νŠΈμ—μ„œλŠ” 폴더와 파일 기반으둜 λΌμš°ν„°λ₯Ό μžλ™μœΌλ‘œ 생성해 μ€λ‹ˆλ‹€.

// λ·° μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λΌμš°ν„° μ„€μ • 파일
new VueRouter({
  routes: [
    {
      path: 'URL μ£Όμ†Œ',
      component: URL μ£Όμ†Œμ— μ ‘κ·Όν–ˆμ„ λ•Œ ν‘œμ‹œν•  νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈ
    }
  ],
});

νŽ˜μ΄μ§€ 기반 λΌμš°ν„° μžλ™ 생성

λ„‰μŠ€νŠΈμ—μ„œ μ–΄λ–»κ²Œ 파일과 폴더 기반으둜 λΌμš°νŒ… ν•  수 μžˆλŠ”μ§€ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€. λ„‰μŠ€νŠΈ ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜λ©΄ pages 폴더가 μ‘΄μž¬ν•˜λŠ”λ° κ·Έ μ•„λž˜μ— λ‹€μŒκ³Ό 같이 νŒŒμΌμ„ μƒμ„±ν•©λ‹ˆλ‹€.

page-folder

μœ„μ™€ 같이 νŒŒμΌμ„ μƒμ„±ν•˜λ©΄ URL을 각각 /, /login, /main으둜 μ ‘κ·Όν–ˆμ„ λ•Œ index.vue, login.vue, main.vue μ»΄ν¬λ„ŒνŠΈκ°€ 화면에 ν‘œμ‹œλ©λ‹ˆλ‹€. μ΄λ•Œ λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈμ— <Nuxt/>λΌλŠ” νƒœκ·Έκ°€ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.




Β 



<!-- layouts/default.vue -->
<template>
  <div>
    <Nuxt />
  </div>
</template>

μ—¬κΈ°μ„œ 일일이 URL을 μž…λ ₯ν•˜μ—¬ λ“€μ–΄κ°€κΈ°μ—” λ²ˆκ±°λ‘œμš°λ―€λ‘œ μ•„λž˜μ™€ 같이 νŽ˜μ΄μ§€ 이동 링크인 <NuxtLink to="/urlμ£Όμ†Œ"> λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.





Β 
Β 
Β 





<!-- layouts/default.vue -->
<template>
  <div>
    <h1>
      <NuxtLink to="/">μ‹œμž‘</NuxtLink>
      <NuxtLink to="/login">둜그인</NuxtLink>
      <NuxtLink to="/main">메인</NuxtLink>
    </h1>
    <Nuxt />
  </div>
</template>

이제 각 링크λ₯Ό ν΄λ¦­ν•˜λ©΄ μ•„λž˜μ™€ 같이 λ™μž‘ν•©λ‹ˆλ‹€.

nuxt-routing

λ·° λΌμš°ν„°μ™€μ˜ 비ꡐ

μœ„μ—μ„œ μ‚΄νŽ΄λ³Έ λ„‰μŠ€νŠΈμ˜ λΌμš°νŒ… 방식을 λ·° λΌμš°ν„° 방식과 λΉ„κ΅ν•˜λ©΄ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

Nuxt.js VueRouter
<Nuxt> <router-view>
<NuxtLink to="/"> <router-link to="/">

이처럼 λ„‰μŠ€νŠΈλŠ” λΌμš°ν„° μ„€μ • νŒŒμΌμ„ 일일이 생성 및 μ„€μ •ν•˜μ§€ μ•Šμ•„λ„ λ˜μ–΄ νŽΈλ¦¬ν•©λ‹ˆλ‹€.

<router-view>, <Nuxt> λͺ¨λ‘ λ·° μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. λ”°λΌμ„œ <RouterView>와 <router-view>와 κ°™μŠ΅λ‹ˆλ‹€. <Nuxt>도 그럼 λ™μΌν•œ μΌ€λ°₯ λ„€μ΄λ°μœΌλ‘œ λ³€ν™˜ν•˜λ©΄ <nuxt>λ‘œλ„ μ“Έ 수 있겠죠? πŸ˜ƒ