pages/videos 폴더를 추가한 뒤 그 아래에 1.vue 를 생성한다
대충 내용을 입력하고( We're in video 1)
localhost:8000/videos/1 해 보면
어? 1.vue 의 내용이 아닌 이전에 만들어 놓은 videos.vue의 내용이 나온다
자동으로 routing 한다며? 왜 안돼?
이렇게 해 보자. "1.vue"는 저대로 놔 두고(저장은 하고)
pages/videos.vue 파일에 가서 <nuxt-child> 라는 태그를 추가한 뒤 브라우저에 그대로 입력
localhost:8000/videos/1 해 보면
videos.vue 내용 + 1.vue 내용이 합쳐져서 나온다.
근데 1.vue만 보고 싶은데 어떻게 하느냐
/pages/videos.vue 파일을 /pages/videos/index.vue 로 이름을 바꾸어 옮긴다.
http://localhost:8000/videos 를 하게되면 자동으로 index.vue 파일의 내용을 보여준다.
http://localhost:8000/videos/1 을 하면 1.vue의 내용만 보여준다.
videos.vue 파일을 videos/index.vue 로 바꾸었는데
그럼 videos.vue 도 있고 videos/index.vue도 있으면 어떻게 될까?
pages/videos.vue 를 추가하여 동일하게 <nuxt-child>내용을 입력 한 뒤 확인
http:localhost:8000/videos 를 입력하면 새로만든 videos.vue 에 index.vue 까지 포함되어 나타난다.
또한
http://localhost:8000/videos/1 을 입력해보면
vedios.vue + 1.vue 가 나타난다.
* 중간 정리
. page 에 vue 파일을 생성하면 주소입력시 바로 확인됨.
. index.vue 파일이 없으면 videos.vue 와 videos/1.vue 처럼 <nuxt-child>를 사용하면 아래에 있는 내용이 같이 나옴
. 파일 내용을 분리하려면 videos폴더 아래에 index.vue 파일을 생성.
. 파일내용이 분리되면 video/index.vue 폴더안에 <nuxt-child> 가 있음에도 "1.vue"의 내용은 나타나지 않음.
. "1.vue" 를 확인해보면 videos.vue + 1.vue 가 나타남.
그러면 videos 아래에 1.vue, 2.vue, 3.vue ... 으로 되는 경우
_id.vue 파일을 만들고 호출하면 된다.
/pages/videos/_id.vue 파일을 만들고 1.vue 내용을 복사한다. 다름을 확인하기 위해 느낌표(!!!)를 추가하고 확인한다
http://localhost:8000/2
아직 1.vue를 지우지 않았으므로
http://localhost:8000/1 을 입력하면 1.vue 파일 내용이 나온다.
우선순위는 해당 경로에 파일이 있으면 파일우선.
없으면 _id.vue 사용
경로에 있는 parameter를 사용하려면
{{ $route.params.id }} 를 쓰면 된다.
