mecobalamin’s diary

人間万事塞翁が馬

https://help.hatenablog.com/entry/developer-option

Vue-Routerを使ってみた

vue vue-router javascript http-vue-loader

以前jQueryを使ってウェブサイトを作ってあったのだが
機能を追加するので最近のフレームワークを使ってみた
JavaScriptのフレームワークとして以下の3つが有名らしい

  1. Angular
  2. React
  3. Vue.js

web開発したことないし正直どれが良いかわからない
色々調べたところこの中ではVue.js学習コストが低いらしい
そこでVue.jsでサイトを書き換えることにした

以前作ったサイトは複数のページを移動するが
実際はhtmlのファイルは一つだけで
タグのidを使って表示するコンテンツを切り替えていた
参考にしていたのはこの本

今考えるとSinge Page Application (SPA)なのかも
参考にしていた本は10年以上前に出版されていて
内容もいささか古くなっている

幸いvue.jsではVue-Routerを利用して
SPAを作ることができるそうだ
そこでVue.jsで作り直すことにした

今回は試しにVue-Routerを使ってページを表示する

やったこと

  1. サーバーを立ち上げる
  2. .html、.vueファイルを作成する
  3. JavaScriptファイルを作成する

1. サーバーを立ち上げる
Vue-Routerのファイルをテストするときはサーバー経由で実行する
サーバーを経由せずにファイルを実行すると
CORS policyで実行がブロックされる

私は2種類の方法でサーバーを使っている
1-a. wslでnginxを実行する
1-b. vs codeの拡張機能でLive Serverを使う

1-a. wslでnginxを実行する
以前nginxをDocker上に起動する記事を書いた
JBrowseをDockerで動かす、その5、Nginxの起動とJBrowseへのアクセス - mecobalamin’s diary
メモ: DockerでNginxを使う - mecobalamin’s diary
これを利用している

1-b. VScodeの拡張機能でLive Serverを使う
VScodeの拡張機能にはLive Serverがあり
編集したファイルをブラウザで実行できる
Live Server実行前に作成したファイルのあるフォルダを
ワークスペースに追加する
こっちもお手軽で便利

2. .html、.vueファイルを作成する
作成するファイルは1つのhtmlファイルと(index.html)
2つのVueファイル(home.vue、about.vue)、
ひとつのJavaScriptファイル(index.js)の4つ

index.htmlファイルでCDNを読み込む
vue 3
router-vue 4
http-vue-loader

JavaScriptファイルも読み込む

Vue-Routerを使うときVue-cliを使うという説明が多いが
使い方がちょっとめんどい
http-vue-loaderを使う手もある
qiita.com
私はhttp-vue-loaderを使っている

bodyタグにidが"app"のdivタグとrouter-viewタグを記述する
Router-Vueはidが"app"のdivタグの子にあるrouter-viewタグに
.vueファイルを差し込む

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>
            Vue-Routerを使ってみた
        </title>
    </head>

    <body>
        <div id="app">
            <div>
                <router-view></router-view>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
        <script src="https://unpkg.com/vue-router@4"></script>
        <script src="https://unpkg.com/http-vue-loader"></script>
        <script src="./js/index.js"></script>

    </body>
</html>

home.vueとabout.vueにはそれぞれtemplateタグがある
このタグの子がindex.htmlのrouter-viewタグに表示される
router-link to="/about"はブラウザで表示するとき
a href="#/about"に置き換わる

home.vue

<template>
    <div>
        <div>
            <h2>
                ここはホームです
            </h2>
        </div>
        <div>
            <router-link to="/about">このサイトの説明ページに移動します</router-link>
        </div>
    </div>
</template>

about.vue

<template>
    <div>
        <div>
            <h2>
                ここはVue-Routerのテストサイトです
            </h2>
        </div>
        <div>
            <router-link to="/">ホームに戻ります</router-link>
        </div>
    </div>
</template>

3. JavaScriptファイルを作成する
JavaScriptファイルにルートを定義する
pathとcomponentの組み合わせで
「pathにアクセスしたらcomponentを呼び出せ」
というふうに表す
今回の場合だと"/"で"./home.vue"を呼び出せとなる
componentはhttp-vue-loader経由で目標のファイルを呼び出す

const routes = [
    {
        path: '/',
        name: 'home',
        component: httpVueLoader('./home.vue')
    },
    {
        path: '/about',
        name: 'about',
        component: httpVueLoader('./about.vue')
    }
]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes
});

const app = {
};

Vue.createApp(app).use(router).mount("#app");

VueRouter.createRouterでルーターを生成する
createRouterにはいくつかオプションがあるが
試した感じだとhistoryとroutesオプションは必須

historyオプションはhistory/hashモードのいずれで動作するかを指定する
違いをわかっていないがhashモードを使っている
qiita.com

routesオプションでルートを定義した変数routesを指定している
実際には「routes: routes」と書くが省略構文でroutesとだけ書いてある

通常はappにmethodsやcomputedを記述するが
今回は使用しないので空にした
最後にappをindex.htmlの#appにマウントしつつ
routerを有効化した

ファイルを作成できたらサーバー経由で実行する


とりあえずここまでできたら
複数のページを切り替えながら表示できるはず