概要
VueRouter は特定のパスにアクセスした際に Vue コンポーネントを呼び出すことができる機能です
今回はインストールから簡単な使い方まで紹介します
環境
- macOS 10.15.6
- nodejs 14.5.0
- yarn 1.22.4
- vue cli 4.4.6
- vue router 4.4.6
インストール
vue cli を使ってインストールします
編集途中のコードがある場合はコミットしましょう
またインタラクティブに聞かれますがとりあえずエンターで OK です
vue add router
Vue Router を使う設定を追加
どうやら最新版だと何もせずとも src/main.js
に router を使う設定を入れてくれるようです
vim src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
またルーティングを定義するための src/router/index.js
やルーティング先のビューを定義するための src/views/Home.vue
なども自動で作成してくれます
なのでこの状態で起動すると VueRouter を使って作成したページを確認することができます
yarn serve
独自のルーティングとビューを追加してみる
ではここからは学習として独自のルーティングを追加してみます
まずは新規のルーティング (/hello
) を追加します
vim src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import HelloWorld from "../components/HelloWorld.vue"; // add
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import("../views/About.vue")
},
// add
{
path: "/hello",
name: "HelloWorld",
component: HelloWorld
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
import 文で Vue コンポーネントを追加しています (あとで作成)
そして routes 配列にルーティングを追加します
アクセスするパスと使用する Vue コンポーネントを指定しましょう
次に Vue コンポーネントを追加します
src/components/HelloWorld.vue
がすでにある場合はそれを使っても OK です
今回は適当にカウントするコンポーネントを作っています
vim src/components/HelloWorld.vue
<template>
<div>
<h1>{{ counter }}</h1>
<button v-on:click="countup">up</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
counter: 0,
}),
methods: {
countup: function() {
this.counter += 1
}
}
};
</script>
最後にメインコンポーネントとなる App.vue を書き換えて完了です
全部記載していますが追記しているのは 6 行目の <router-link to="/hello">HelloWorld</router-link>
になります
vim src/App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/hello">HelloWorld</router-link>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
動作確認
yarn serve
こんな感じで新しいルーティングとコンポーネントが表示されるのが確認できると思います
最後に
VueRouter を試してみました
最新版だと雛形も作成してくれるのでかなり簡単に導入できるかなと思います
VueRouter を使うと URL にも現在表示中のコンポーネントが表示されるのでただページが遷移するよりかは UX 的にも良くなるかと思います
またコーディングする側もルーティングごとに役割を分離できるのでメンテナンスもしやすくなるかなと思います
0 件のコメント:
コメントを投稿