【Vue.js】Vue CLI 신규 페이지 추가 방법

Vue CLI로 만든 사이트에 새 페이지를 추가하는 방법.

절차

views 폴더 아래에 새 파일을 만듭니다

라우팅 추가

router-link 태그로 링크 추가

1. views 폴더 아래에 새 파일 만들기

views 폴더 아래에 페이지를 만듭니다. 파일명은 컴퍼넌트의 작성 규칙에 준거해 대문자 시작해, 카멜 케이스로 한다.

아래 BitcoinAPI.vue를 만드는 경우.

2. 라우팅 추가

router 폴더의 index.js 파일을 라우팅하는 데 만든 페이지를 추가합니다.

필수는 ①path 옵션과 ②component 옵션의 2개.

①path: URL을 기술.
②component:지정의 기술로 작성한 파일을 지정.component: () => import('../views/ファイル名')
name 옵션을 추가해 두면 링크를 설치할 때 path가 아니라 name으로 지정한 값도 사용할 수 있다.
name:'ルーティングの名前'
index.js

  const routes = [
  {
    path: '/bitcoin-api',
    component: () => import('../views/BitcoinAPI.vue'),
  }
]

3. router-link 태그로 링크 추가

링크를 설치하려는 페이지의 template 태그 내에 router-link 태그를 설치합니다.

링크 대상의 path는 to 속성에 기술한다.
<router-link to="相対パス">アンカーテキスト</router-link>
template 태그

<router-link to="/bitcoin-api">Bitcoin API</router-link>

설치한 링크에서 해당 URL로 페이지가 열리면 완료.