Vue Nuxt

vue view's core concept

 

Nuxt Link Compoment

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

 

a태그를 대신해서 사용할 수 있으며, 따로 컴포먼트를 import할 필요없이 같은 도메인 아래에서 호스팅이 되는 페이지에 대해서 사용이 가능하며, 다른 도메인의 페이지를 연결하려면 a태그를 사용해야한다. 

 

Dynamic Pages

<template>
  <h1>{{ slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

<template>
  <h1>{{ book }} / {{ slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

API콜에 대해서 하나의 view가 연결되는 것이 아니라 page 하위에 있는 파일들을 다 조회한다음에 랜더링을 하는 것이 가능하기 때문에 _slug.vue 의 이름으로 파일을 만들경우 book 에 대한 vue 파일을 호출할 때, slug에 대한 데이터까지 끌어올 수 있다.