【Nodejs,Vuetify】VueRouterで複数ページのコンテンツを作成する

前回はVue、Vuetifyをインストールだけしたんでした。

んで、このままだと単体ページのコンテンツしか作成できないので

複数ページのコンテンツが作成できるようにしたい、と。

そんな感じで締めてました。

…あってるよね？

なので、今回はそれができるように、VuetifyにRouterを導入すると

そんな感じで行きます。

１．VueRouterってなんだよ？

Vue Router

https://router.vuejs.org/ja/

なんでもVue.jsの公式ルータらしい(曖昧)

動的ルートマッチングを行うことができるようになり、

「特定のURLにアクセスした」ときに「特定の内容を表示する」ことができるようになる

ということでいいのかな。

２．インストールしてみる

まずプロジェクトを作っていきます。

これは前回と同じ。

今回のプロジェクト名は「myapp_router」にします。

プロジェクト作成時はVue2で、

Vuetifyはdefaultの選択肢で作成します。

vue create myapp_router

cd myapp_router

vue add vuetify

VueRouterのインストールはコマンドで行います。

npm install vue-router

これだけ。インストールは簡単スね！

まあ、まだこの状態では何も表示は変わりませんが…。

３．Router設定を行う

３．１．表示するページの作成

と、いうわけでRouterの設定を行っていきます。

先ずは設定するページを作成します。

ページはpage1,page2という感じで作ってみます。

実際に作成する際には、トップ画面、ログイン画面…という単位で作ると思います。

ページはこの後のRouter設定で

読み込めるようにすればどこでも大丈夫だと思いますが

「myapp_router/src/components」以下に作成します。

とりあえず、下記のような感じ。

./src/components/page1.vue

<template>

  <div>

    <p>

      ここはページ１です。

    </p>

    <router-link to="/page2">Go to page2</router-link>

  </div>

</template>

<script>

</script>

<style>

</style>

./src/components/page2.vue

<template>

  <div>

    <p>

      今はページ２を表示しています。

    </p>

    <router-link to="/page1">ページ１に遷移します。</router-link>

  </div>

</template>

<script>

</script>

<style>

</style>

３．２．Router設定ファイルの作成

次にRouter設定をしていきます。

プロジェクト直下に「router.js」設定ファイルを作成することで、

このプロジェクトにRouter設定を行うことができます。

内容はこんな感じ。

./router.js

import Vue from 'vue'

import Router from 'vue-router'

import page1 from '@/components/page1'

import page2 from '@/components/page2'

Vue.use(Router)

export default new Router({

  mode: 'history',

  routes: [

    {

      path: '/',

      component: page1

    },

    {

      path: '/page1',

      component: page1

    },

    {

      path: '/page2',

      component: page2

    }

  ]

})

現在は特に指定していないので、「localhost:8080」でアクセスしますが、

特に指定のなかったときはpage1を表示します。(routerひとつ目の設定)

「http://localhost:8080/page1」とした場合もpage1を表示します。

「http://localhost:8080/page2」とした場合はpage2を表示するといった感じです。

３．３．Router設定ファイルの読み込み

作成したRouter設定ファイルを読み込んでいきます。

これは「./src/main.js」のファイルで行います。

複数のファイルを変更しないといけないので、慣れるまで大変ですね。

下記のような感じに修正します。

初期設定から、赤文字の部分を追記しています。

./src/main.js

import Vue from 'vue'

import App from './App.vue'

import vuetify from './plugins/vuetify';

import router from './router';

Vue.config.productionTip = false

new Vue({

  router,

  vuetify,

  render: h => h(App)

}).$mount('#app')

先ほど作成したRouter設定ファイルを読み込むかたちですね。

この状態で「npm run serve」すると、サーバーがRouter設定を有効にして

起動してくれます。

(まだ、設定が残っているので動きませんが…。)

３．４．App.vueを編集する

Router設定ファイルはこれでいいのですが、

最後に、表示する部分に手を入れる必要があります。

結構面倒臭いですね！

Webのフロントエンドの開発だとこれが普通なのかな？

赤文字の部分が、プロジェクト作成時の初期ファイルから修正した部分です。

./src/App.vue

<template>

  <v-app>

    <v-app-bar

      app

      color="primary"

      dark

    >

      <div class="d-flex align-center">

        <v-img

          alt="Vuetify Logo"

          class="shrink mr-2"

          contain

          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"

          transition="scale-transition"

          width="40"

        />

        <v-img

          alt="Vuetify Name"

          class="shrink mt-1 hidden-sm-and-down"

          contain

          min-width="100"

          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"

          width="100"

        />

      </div>

      <v-spacer></v-spacer>

      <v-btn

        href="https://github.com/vuetifyjs/vuetify/releases/latest"

        target="_blank"

        text

      >

        <span class="mr-2">Latest Release</span>

        <v-icon>mdi-open-in-new</v-icon>

      </v-btn>

    </v-app-bar>

    <v-main>

      <!-- <HelloWorld/> -->

      <router-view/>

    </v-main>

  </v-app>

</template>

<script>

// import HelloWorld from './components/HelloWorld';

export default {

  name: 'App',

  components: {

//    HelloWorld,

  },

  data: () => ({

    //

  }),

};

</script>

修正内容の簡単な説明ですが、

プロジェクト作成時の状態では「HelloWorld」というコンポーネントを

App.vueで直接読み込んで表示していました。

今回は、ここの部分を「<router-view/>」という形に変更しています。

こうすることで、ここの部分がRouter設定ファイルのページ設定で表示されます。

script部分にも修正が入っていますが、

これは、「npm run serve」したときに、エラーとして返ってしまう部分ですね。

今回の修正でHelloWorldコンポーネントは使用されなくなっているのですが、

node.jsが思いのほかきっちりしているらしく、

不要なコンポーネントファイルがあると、容赦のないエラーを出してきます。

ちょっと修正して表示したいときは不便ですが、

安全性を重視していると考えて、大人の対応をしましょう。

４．アクセスしてみる

最後に、サーバー起動してアクセスしてみましょう。

サーバー起動は下記のコマンド

npm run serve

対応漏れなどでエラーが出たりしたら、修正して再度実行しましょう。

起動できたら、ページにアクセスしてみます。

http://localhost:8080

下のような画面が表示できればとりあえず動作しています。

デフォルトのURLではページ１が表示されていますね。

page1.vueの内容が表示されていると思います。

下記のURLでもアクセスしてみましょう。

http://localhost:8080/page1

Router設定が正しくできていれば、下記のように表示できます。

画面下部にリンクが表示されているのでクリックしてみましょう。

ページ１からページ２へ遷移すると思います。

http://localhost:8080/page2

文字だけの表示なので、わかりにくいかもしれないですが、

page2.vueの内容が表示できていると思います。

この画面の下にあるリンクをクリックすると、

今度はページ２からページ１へ遷移できます。

５．おわりに

というわけで、VueRouterを使用することで、

Vuetify内で複数ページで構成されたコンテンツを作成できそうですね。

データベース部分をなんかして、デザインはVuetifyで~とかやれば

割としっかりしたコンテンツを作ったりできるのではないでしょうか？

(そのDB部分が大変なんだよみたいな話は置いておいてね？)

Webフロントエンドの設定はいろんなファイルが関連して動いていて、

複数のファイルを修正するのが、慣れるまで大変ですね。

かんたんな部分から、少しずつ理解していきたいと思います。