今年も早いものでもう終わりですね。

もう大晦日です。

実家でPCが思うように動かず、

とりあえずタブレットから投稿を試みていますが、難しいですね。

ひとまず、今年の振り返り。

今年はコロナもあり、かなり例年にない年でした。

仕事面でかなり変化があり、

リモートワークが導入され、環境が大きく変わりました。

これは、通勤時間がなくなって自分の時間が増えてよかった。

やり取りの関係で完全リモートというわけにはいかないけど。

あとは、大学とやり取りがはじまったこと。

ダメ元でツッコんだ話から、途中で中断されたものの、

その話が縁で、最近またやり取りが始まっていたり。

社長や上長宛に企画書をぶっ込んだり。

まあ、大した企画は出せてないんだけど、ちょくちょく出すようになった。

中小の会社だし、上に掛け合いやすいしね。

今後も出来るといいのだけど。

自分の会社を立ち上げたり。

まだ大したことできてないけど、個人事業主はじめました。

他も色々始めた年ではあった。

大分大変だったけど、これまでと一線を画す年だったな、と。

そんな感じでひとまず、今年もお世話になりました。

前回は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>

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

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

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

SteelEdge2

2021年3月12日金曜日

【C#】C#でOpenCVを触り始める(OpenCvSharp)

2021年1月11日月曜日

【雑記】今年始まってしばらくたちますよ

2020年12月31日木曜日

【雑記】今年も終わりですね

2020年11月29日日曜日

【雑記】暫く遠ざかっていた感じ

2020年10月15日木曜日

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

１．VueRouterってなんだよ？

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

３．Router設定を行う

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

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

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

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

４．アクセスしてみる

５．おわりに

2020年10月9日金曜日

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

2020年10月7日水曜日

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