【Vue.js】Vue CLI 新規ページの追加方法

2500 ワード
Vue.js vue-cli Vue.js テキストリンク

【 Vue.js】Vue CLI 新規ページの追加方法

Vue CLIで作成したサイトに新たにページを追加する方法。

手順

  1. viewsフォルダ配下に新規ファイルを作成する
  2. ルーティングを追加
  3. router-linkタグでリンクを追加

1. viewsフォルダ配下に新規ファイルを作成する

viewsフォルダ配下にページを作成する。ファイル名はコンポーネントの作成規則に則り大文字始まり、キャメルケースとする。

以下、BitcoinAPI.vueを作成場合。

2. ルーティングを追加

routerフォルダのindex.jsファイルのルーティングに作成したページを追加する。

必須なのは、①pathオプションと②componentオプションの２つ。

①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でページが開けば完了。