Nuxt.js를 사용해보자. 2탄

 

 

✏️Nuxt를 사용해보자 2탄.

 

2탄에서는 라우팅에 대해서 알아보려고한다. 

Vue.js에서는 만약 localhost:8080/profile 로 가기 위해서는 Router를 등록하고, Router.js에 name, path, component 등을 

추가해줘야 정상적으로 localhost:8080/profile로 접근할 수 있다.

 

Nuxt.js에서는 어떻게 해줘야 할까? 

위의 번거로운 과정이 모두 사라졌다. pages 폴더에 profile.vue를 생성해주면 끝. 

정말 끝..? 

 

 

profile.vue 

pages 폴더 안에 profile.vue를 추가

 

profile.vue를 추가해주고 localhost:3000/profile로 접속하면? 

 

 

짠. 정상적으로 접근도 되고 데이터도 확인할 수 있다. 

.nuxt 폴더에 route에 보면 

 

.nuxt -> router.js

자동으로 nuxt가 라우터에 추가해줬다. 이렇게 편리해도 되는 걸까(편하고 좋네) 

여기서 이 질문이 나올 수 있다. 동적인 라우터는?? 

 

보통 유저 같은 경우 유저의 ID를 가지고 해당 유저의 프로필로 보낸다는 등의 작업을 할 수 있다. 

위 상황을 예로 들어보고 유저의 ID를 동적으로 받는 라우터를 만들어보자.

 

동적 라우터도 굉장히 쉽다. 우선 pages 폴더 안에 users 폴더를 생성한다. 

폴더를 만드는 것 또한 users라는 라우터 경로가 추가되는 것이라고 보면 된다. 

 

users 폴더 안에 _id.vue를 생성한다. 여기서 앞에 _ 언더바는 동적 라우터일 경우 꼭! 붙여줘야 한다.

동적 폴더도 마찬가지로, 앞에 _ 를 붙여줘야 한다.

 

 

users 폴더 안에 _id.vue 파일 생성

 

.nuxt -> router.js에 생성된 route

users/1234로 접근했을 때 

 

정상적으로 잘 작동한다. 

 

여기서, 공식문서에 추가로 기재된 내용이 있다. 

만약 userID가 숫자일 경우에만 접근을 허용하고 싶을 수도 있다.

지금은 위에 1234가 아니라 qwer이어도 접근이 가능하다. 

 

validate 함수 추가

validate 함수를 추가해주고, 들어온 값을 테스트하는 코드를 작성한다.

그리고 users/qwer 로 접근을 해보면 

 

접근 불가,  Nuxt.js는 자동으로 404나 500 error 페이지를 로딩한다.

 

접근이 허용되지 않는다. 이런 validate는 users 페이지 뿐만 아닌 다른 곳에서도 굉장히 유용하게 사용할 것 같다.

 

 

중첩 라우트도 설정할 수 있는데, 중첩 라우트 같은 경우 폴더와 같은 이름의 vue파일을 폴더와 같은 위치에 둔다. 

 

폴더와 같은 위치의 users.vue

이런 경우 /users의 component가 users.vue가 되고, users 폴더 내에 파일들이 users.vue의 자식이 된다.

 

/users에 _4e63fb22는 users.vue다

 

중첩된 라우트(users.vue)에서는  <nuxt-child/> 를 사용하여 자식 컴포넌트를 노출해줘야 한다.