Vue.js勉強記録その24 Vue3を更にパワーアップしよう 5-2 ver1

Vue.js3超入門

こちらの書籍で勉強中です。

今回はVue Routerによるルーティングです。

いわゆるWebアプリっぽいサイトよりも、より普通のWebサイトを作る機会の多い僕は、ルーティング系はとても興味がありました。楽しみです。

■Vue Routerによるルーティング管理

基本的には、一般的なWebサイトの様に、リンクをクリックするたびに、1ページずつ読み込むわけではなく、必要な表示の内容だけがカラカラと変わっていく感じになる。

・Vue Routerのインストール

書籍では、npmを使ってインストールしている。その際に書籍の執筆時と今現在において、バージョンの違いがある場合があるので注意してほしいと言及されている。

vue-router

こちらのサイトにある通り、

npm install vue-router@4

このコマンドで、うまくいった。

・コンポーネントの準備

まずは、二つのコンポーネントを用意します。

今回は、HelloWorld.vueとHelloJSX.jsxを使います。この2つを、ルーティングで遷移させていきます。

まずは、HelloWorld.vue

<template>
 <div class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p class="mt-3 h5">{{ data.msg }}</p>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 name: "HelloWorld",
 setup(props, context) {
   const data = reactive({
     title: "HelloWorld",
     msg: "This is HelloWorld component",
   });
   return { data };
 },
};
</script>

こちら自体は、今までの書き方と違いはないですね。

同様にHelloJSX.jsxも用意します。

import { ref, reactive } from 'vue'

export default {
   name: 'HelloJSX',
   setup(props) {
       const data = reactive({
           title: 'HelloJSX',
           msg: 'This is JSX component sample.'
       })
       return () => (
           <div class='alert alert-warning'>
               <h1>{data.title}</h1>
               <p>{data.msg}</p>
           </div>
       )
   }
}

こちらも、前回やったComposition APIを使った書き方になっています。

・router.jsを準備

srcフォルダの中に、router.jsを作成し、以下を書きます。

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from "./components/HelloWorld.vue";
import HelloJSX from "./components/HelloJSX.jsx";

export const router = createRouter({
   history: createWebHistory(),
   routes: [
       {
           path: '/',
           name: 'index',
           component: HelloWorld
       },
       {
           path: '/jsx',
           name: 'jsx',
           component: HelloJSX
       }
   ]
})

まず上部のimportは、Vue Routerとコンポーネントをインポートしている。

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from "./components/HelloWorld.vue";
import HelloJSX from "./components/HelloJSX.jsx";

次に、createRouterで、Routerを作成している。

createRouter({
  history:<WebHistory>,
  routes:ルート情報の配列
})

こんな感じで記載する。
historyに関しては、createWebHistoryでOK。

ルート情報は、ルート情報のオブジェクトを配列で複数指定していく。

{
  path:割り当てるパス,
  name:名前,
  component:割り当てるコンポーネント
}

pathは、URLのドメインの後の内容。'/'や'/about'などになりそう。
nameは、識別するための名前みたいなのでなんでもOK。
componenは、どのコンポーネントを表示するかを指定する。

main.jsにrouterを使用する記述をする

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { router } from './router'

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

最後にApp.vueを編集する。

<template>
 <div>
   <router-link to="/" class="btn btn-primary mx-2"> Go to Top </router-link>
   <router-link to="/jsx" class="btn btn-warning"> Go to JSX </router-link>
 </div>
 <hr />
 <router-view></router-view>
</template>

<script>
export default {
 name: "App",
 created() {
   console.log("*****App Created!*****");
 },
 mounted() {
   console.log("-----App Mounted!-----");
 },
 data() {
   return {
     title: "Router",
   };
 },
};
</script>

これで、router-viewの箇所に、

URLが、
localhost:3000だった場合は、HelloWorld.vueが、
localhost:3000/jsxだった場合は、HelloJSX.jsxが表示される。

上部のボタンは、
<router-link>で、to属性を使ってリンクを作っている。

createdやmountedのconsole.logは、ページを表示する時の一回しか実行されておらず、上部のボタンをクリックしてページを遷移しても、再読み込みしているわけじゃないのがわかる。

■まとめ

vue.jsでやりたかったことの一つであるルーティングに入りました。ページが読み込まれるわけじゃないから、再読み込みの時間がないのでいい感じですね。

まだまだルーティングの機能はいっぱいありそうなので、引き続き頑張ります！