3-2 라우팅 기본:파일 기반 라우팅

페이지 디렉토리에 vue 파일을 생성하면 뷰에서 자동으로 라우터가 설정된다.

{

  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

 

뷰는 /pages 밑의 파일을 기반으로 파일 기반 라우팅을 지원하는데,

/url 의 매핑이 /pages 디렉토리 밑의 파일 이름으로 매핑되게 된다.

 

또한 동적 매핑을 위해서는 [[]]같은 대활고를 사용하면 동적인 매핑이 가능하다.

 

동적임포트를 제공한다.

 

catch-all routing 

<template>
  <p>{{ $route.params.slug }}</p>
</template>