라우팅

페이지 라우팅 가이드

다이내믹 라우트

pages 디렉토리 안에 있는 Vue 파일을 토대로 다이내믹 라우트를 구성합니다. 즉, 디렉토리 또는 파일을 참고하여 Nuxt.js가 자동으로 라우트 코드를 생성합니다.

pages 내부 컴포넌트

routes (경로)

index.vue

/

services.vue

/services

music-info/index.vue

/music-info

music-info/_musicId.vue

/music-info/:musicId

다이내믹 라우트 예시

Nuxt.js 애플리케이션에 http://localhost:3000/books/17 URL로 접속할 경우, pages/books/_id.vue 파일이 연결되어 화면에 렌더링 되며 동적으로 라우트 객체를 통해 전달된 매개변수 17 값이 도서 id로 주어집니다.

pages/users/_id.vue
<template>
<header>
<!-- $route.params.id 값은 17 -->
<h1>도서 ID: {{ $route.params.id }}</h1>
</header>
</template>
<script>
</script>

Vue 컴포넌트 파일에서 라우트 객체에 접근하는 방법은 $route 이고, 라우트 객체의 매개변수는 속성 params를 통해 접근할 수 있습니다. (예: $route.params)

라우터 링크

<nuxt-link> 컴포넌트의 to 속성에 라우트 패스를 입력해 해당 페이지로 이동 시킬 수 있습니다.

layouts/AppNav.vue
<nuxt-link to="/services"> 서비스 </nuxt-link>

패스가 고정된 경우가 아닐 경우 v-bind:to 또는 :to 속성을 사용해 동적으로 라우트 패스를 설정할 수 있습니다.

layouts/AppNav.vue
<nuxt-link :to="'/products/' + product.id"> {{ product.name }} </nuxt-link>

링크 활성화 CSS 클래스

링크가 활성화 되었을 때 적용되는 active CSS 클래스의 기본 값은 nuxt-link-active 입니다. 기본적으로 활성화 된 클래스의 동작은 포괄적인 매칭 입니다. 예를 들어, <nuxt-link to="/z">는 현재 경로가 /z 또는 /z/로 시작하는 경우 이 클래스가 적용됩니다.

반면 페이지의 현재 경로를 링크를 "완전 일치(Exact) 모드"로 강제 하려면 nuxt-link-exact-active 사용합니다.

assets/main.css
.nuxt-link-active {
border-bottom: 2px solid currentColor;
}
.nuxt-link-exact-active {
border-bottom: 1px solid currentColor;
}

링크 활성화 클래스 이름을 변경하고자 한다면 환경 설정(nuxt.config.js)을 통해 바꿀 수 있습니다.

nuxt.config.js
export default {
router: {
linkActiveClass: 'link-active',
linkExactActiveClass: 'link-exact-active'
}
}

프로그래밍 방식의 라우터 링크

컴포넌트 내에서 프로그래밍 방식으로 링크를 수행하려면 this.$router.push() 메서드를 사용합니다.

ProgrammingLink.vue
<template>
<div>
<label for="page-name">페이지 링크 주소 이름<label>
<input type="text" id="page-name" v-model="pageName">
<a href @click.prevent="linkPage">프로그래밍 방식 링크</a>
</div>
</template>
<script>
export default {
data() {
return { pageName: '' }
},
methods: {
linkPage() { this.$router.push(`/books/${ this.pageName }`); }
}
};
</script>

라우트 매개변수 검사

컴포넌트 내에서 validate() 메서드를 사용해 라우터의 매개변수를 검사할 수 있습니다. 예를 들어 /books/10과 같은 숫자 경로만 허용하도록 검사를 수행하고자 한다면 다음과 같이 코드를 작성할 수 있습니다.

<script>
export default {
validate(data) {
// 라우트 매개변수 ID 값이 숫자인 경우만 허용
return /^\d+$/.test(this.$route.params.id);
}
};
</script>

중첩된 라우트

중첩된 라우트의 부모 컴포넌트는 뷰가 포함된 디렉토리와 동일한 이름의 Vue 파일 이어야 합니다.

pages/users.vue ⟺ pages/users/

부모 컴포넌트 템플릿 내부에 <nuxt-child /> 컴포넌트를 사용하면 내부에 자식 컴포넌트가 중첩됩니다.

pages/users.vue
<template>
<nuxt-link to="/yamoo9">야무<nuxt-link>
<nuxt-child />
</template>

중첩된 컴포넌트인 자식 컴포넌트 중, index.vue 파일은 /users 라우트에 사용자가 접속 했을 때 보여집니다.

pages/users/index.vue
<template>
<p>사용자를 선택하세요.</p>
</template>

중첩된 컴포넌트인 자식 컴포넌트 중, _id.vue 파일은 /users/:id 라우트에 사용자가 접속 했을 때 보여집니다.

pages/users/_id.vue
<template>
<p>{{ user.name }}</p>
</template>

참고