Vue｜アプリケーション開発｜step2

この記事ではルーティング設定に挑戦します

前回の記事で、Vueでアプリケーション開発を行うためのセットアップを行いました。

Vueのサンプル画面が未だの場合は、前回の記事を確認してみてください。

今回は新規ページ作成とルーティング設定を行なっていきます！

新規ページの作成

まずはsrc/views内に、UserView.vueというファイルを新規作成します。

他のサンプルページからコピペしているだけですが、以下のようなコードになります。

今回は新規ページを遷移して、画面が表示されるまで確認します。

中身の修正は、次回以降で行なっていきます。

<template>
  <div class="about">
    <h1>This is an User page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

ルーティング

次に、src/router/index.ts（typescript形式を選ぶとts形式になります）に、以下の部分を追加します。

ここではpathと対応するコンポーネントの設定をしています。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
　　　　　　　　　// ここから新規追加
    {
      path: '/user',
      name: 'user',
      component: () => import('../views/UserView.vue')
    }
　　　　　　　　　// ここまで
  ]
})

Home画面に遷移リンクの追加

最後にsrc/App.vue内に新規ページに遷移するリンクを挿入します。

以上で、新規ページの作成とそのルーティング設定が完了です。

実際にローカル開発環境で新規画面に遷移できるか確認してみましょう！！

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it! Congrats!!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/user">User</RouterLink>   <<--- ここを新規追加
      </nav>
    </div>
  </header>

  <RouterView />
</template>

まとめ

この記事では新規ページの作成とルーティング設定を行いました。