【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フロントエンドの設定はいろんなファイルが関連して動いていて、

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

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

【Nodejs】Vue,Vuetifyのインストール

かなり前の記事になりますが、

Node.js系の記事を挙げていました。

その時はNuxt.jsをやっていたんでしたね。(うろ覚え)

nodejs系の時の記事

https://steeledge2.blogspot.com/2020/01/nodejsnodejs.html

最近また触り始めました。

とはいっても、今回はVuetifyです。

これもフロント側のフレームワークですね。

今回はVuetifyの導入に関して忘れないように書いておこうかなと。

【雑記】しばらくブログから離れていましたね…

 気づけば9月を通り越して10月

ブログも一か月以上放置していたのでした。

このままずるずるいかないように、

とにかく一回更新して仕切り直ししたいと、そういった雑記ですね。

【LibreOffice】グラフを図にして貼り付けられない？

7月に仕事のPCが吹っ飛んでから、
それまでOfficeを使っていたんですが、入れる間もなかったので
LibreOfficeを使用してました。

普通に使う分には結構いいですけどね、LibreOffice
オープンソースでフリーで使えるし。
ちょっと感覚違ったりするけど、Excelとか、パワポとか
ほとんどOfficeの感覚で使用できるし。

そんなOfficeのExcelに相当する「Calc」で
ちょっとばかし、困ったことがあったので書いておこうと思います。

【Arduino】久々に触ってみた、互換機Lチカ

最近Arduino触ってなかったな～と。
この前、会社のセミナー参加でArduinoの話を聞く機会があり、
一時的にモチベーションが高まったので、久々に触ってみました。

まあ、触ったら触ったで、全然動かせなくなってて
あんのじょう、トラブったんですけどね。

その辺も含めて、少し書いておきたい。

【雑記】この前、歳を一つとりました

コロナ渦でのお盆休みを過ごしております。
まあ、お盆休みといっても、遠出はできそうにないので、
近くでのんびり～と過ごす感じですが。

この前、誕生部を迎えることになりまして～
誕生日を迎えたという事は、歳を一つとったということですか。
もう、おっさんもおっさんという感じなので、
ひとつ歳が増えたくらいで狼狽えることはないですが。

そんな感じの雑記をつらつらと…。

【フリマ】PayPayフリマでの返金対応をした話

4連休も何事もなく過ぎ去り、平日の始まりです。
コロナの感染者が少し高止まりしていて、ちょっと不安ですね。
ただ、感染者は増えていても、重傷者はそれほどでもないなど、
テレビの情報だけで踊るのはちょっと待った方がよさそうな点もいくつか…。

最近、メルカリやラクマ、PayPayフリマなどを使用しているのですが、
そのうちの一つ「PayPayフリマ」での販売で、
自分の売った商品に初期不良があって返金対応をした時の話を書いておこうかと。
結構勉強になったので。

販売結果としては、単純に失敗例にあたります。
販売する以上、今後全く発生しないとも言い切れないので
失敗ケースの対応方法として、忘れないように書いておこうと思います。