こんにちは。つばさです。
前回の続きを書こうかと思います。
今回はVueRouterを使えるようにしていきたいと思います。
ちなみに前回はMac環境でしたが、今回はWindows環境です。Windowsだとソースコードのコピペがうまくできたので。
今更ですが、Vue.jsに関する説明は省きます。あくまで環境の作り方だけ説明します。
VueRouterは、Vue.jsでSPA（シングルページアプリケーション）を構築する際に使われます。
簡単に言えば、フロントでルーティング制御する機能です。
https://next.router.vuejs.org/
まずは、npmでVueRouterをインストールします。vue3の場合は、v4をインストールします。
npm install vue-router@4今回は、ディレクトリやファイルを新規作成したり、編集したりするので今回の最終的なディレクトリ・ファイル構成を添付しておきます。
赤線で引いてあるディレクトリ・ファイルを今回新規作成、編集します。
srcディレクトリ下に、routerディレクトリを作成して、その下にindex.jsを作成して、下記のように記載します。
// skl-blog/src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
const routes = [];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;main.jsに追記します。
// skl-blog/src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 追記
createApp(App).use(router).mount("#app"); // use(router)を追記では早速ルーティングを追加して、ページを表示したいと思います。
router/index.jsのrotesにルーティングを記載します。今回はHome.vueを表示させます。（Home.vueは後で作成します）
// skl-blog/src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/Home.vue"; // 追記
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;Home.vueファイルをsrc/components下に作成します。
VueRouterの確認のためだけなので、内容は簡単にします。
<template>
<div>Home画面</div>
</template>
<script>
export default {};
</script>最後に、src/App.vueの内容を全て消して、下記のように記載します。
<template>
<router-view></router-view>
</template>
<scrpt></scrpt>npm run dev
新しいページを追加したい場合は、Home.vueのようにまずファイルを作成して、/src/router/index.jsのroutesにルートを記載してください。
例えばAbout.vueを作成して、/aboutにアクセスしたときにAbout.vueを表示するようには下記のように記載します。
// skl-blog/src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;これで、http://localhost:3000/aboutにアクセスしたとき、About.vueを表示します。
ついでにリンクを作成して、ページを切り替えられるようにします。
リンクは<router-link>タグを使用します。URLパスやパス名（上記のindex.jsのroutesで指定したpathやname）でも指定できます。
<template>
<ul>
<li>
<router-link :to="{ path: '/'}">HOME</router-link>
</li>
<li>
<router-link :to="{ name: 'About'}">About</router-link>
</li>
</ul>
<router-view></router-view>
</template>
<scrpt></scrpt>次回は、TailwindCSSを導入したいと思います。
といっても、公式ドキュメント通りに進めるだけですが、、、
ついでに、TailwindCSSの使い方や、面白い部分も簡単に紹介できたらと思います。