【Vue】Vue CLIでルーターを設定してページ遷移を実装しよう！

【Vue】Vue CLIでルーターを設定してページ遷移を実装しよう！

こんにちは！今回は、Vue CLI で作成したアプリケーションに Vue Router を追加して、ページ遷移を実装する方法を紹介します。

実際にページ遷移を行うための設定を順を追って説明しますので、Vueアプリの構築を進めている方はぜひ参考にしてみてください！

1. Vue Routerのインストール

まず、Vueにページ遷移を実装するために vue-router をインストールします。

インストールコマンド

以下のコマンドで vue-router をインストールします。

yarn add vue-router

2. コンポーネントを作成

次に、遷移先のページとなるコンポーネントを作成します。

今回は、「チャットページ」というコンポーネントを作成します。

ChatPage.vueの作成

/src/components/ChatPage.vue ファイルを作成して、以下の内容を追加します。

<template>
  <div>
    <p>ここはチャットページです</p>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'ChatPage',
}
</script>

<style scoped>
</style>

このコンポーネントはシンプルなチャットページを表示します。

次に、最初のホームページとして使うコンポーネント「HomePage」も作成します。

HomePage.vueの作成

元々の HelloWorld.vue をシンプルにして、HomePage.vue という名前に変更します。

以下の内容を追加します。

<template>
  <div>
    <router-link to="/chat">chat</router-link>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
}
</script>

<style scoped>
</style>

このファイルでは、router-link を使って、クリックすることで /chat に遷移するリンクを作成しています。

router-linkを使用することで、実際に画面遷移をせずに画面の内容のみを変更することが可能です。

3. Vue Routerの設定

次に、Vue Routerの設定を行います。

src フォルダ内に router フォルダを作成し、その中に index.js を作成します。

router/index.js の作成

以下の内容を src/router/index.js に追加します。

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../components/HomePage.vue';
import ChatPage from '../components/ChatPage.vue';

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: HomePage,
  },
  {
    path: '/chat',
    name: 'ChatPage',
    component: ChatPage,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

これで、/ と /chat の2つのページを設定しました。

4. App.vueの修正

次に、App.vue の中でビューを切り替える部分を設定します。

router-view を使って、ルートに応じてコンポーネントを表示するようにします。

App.vueの修正

App.vue の中身を以下のように修正します。

※ここでは前回のLiff環境を使用しているため、Liff関係のコードが書かれていますが無視してください。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
  loggedIn: {{ loggedIn }}
  {{ profile.displayName }}
</template>

<script>
import liff from "@line/liff";

export default {
  name: "App",
  data() {
    return {
      loggedIn: false,
      profile: {
        displayName: "",
      },
    };
  },
  mounted() {
    liff
      .init({ liffId: "LiffID" }) // LIFF IDを貼り付け
      .then(() => {
        this.loggedIn = liff.isLoggedIn();
        this.getProfile();
      })
      .catch((err) => {
        this.occoredError = "error:" + err;
      });
  },
  methods: {
    getProfile() {
      liff.getProfile().then((profile) => {
        this.profile = profile;
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ここで、<router-view /> を追加することで、ページ遷移を行ったときに対応するコンポーネントが表示されます。

5. main.jsの修正

最後に、main.js で作成したルーターをアプリケーションに組み込みます。

main.jsの修正

以下のように main.js を修正します。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

これで、Vue Routerがアプリケーションに組み込まれ、ページ遷移が可能になります。

6. 結果の確認

ブラウザで http://localhost:8083 にアクセスし、/ にアクセスするとホームページが表示されます。

ホームページにある「chat」リンクをクリックすると、/chat に遷移し、チャットページが表示されるはずです。

7. Bootstrapの追加

ついでではありますが、ページのデザインを整えるためにBootstrapを追加する方法も紹介します。以下のコマンドでBootstrapをインストールします。

yarn add bootstrap
yarn add @popperjs/core

インストール後、main.js でBootstrapを読み込むようにします。

main.jsの修正

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

createApp(App).use(router).mount('#app');

これで、Bootstrapを使ったスタイリングがVueコンポーネント内で使用できるようになります。

8. まとめ

これで、Vue Router を使ってVueアプリケーションにページ遷移を追加する方法が完了しました。

次回は、これをさらに拡張して、Liffでアプリケーションの作成を行っていきます。

参考文献

コメント