Vue.jsについて学習したので、Vue Routerを導入してみようと思います。
非同期でバリバリページが遷移して欲しい・・・
目的
Vue.jsのアプリにVue Routerを導入する
(前提、環境)
mac
macOS Mojave 10.14.5
Homebrew 2.2.11
nodejs v 10.16.3
はじめに
前回の記事の続きです。
公式
参考記事
山田さん著書のこれから始めるVue.jsを参考にしております。
めちゃくちゃわかりやすかったです・・・・!
導入
Vue Routerのインストール
最初からカスタムビルドすればrouterも装備したままアプリを作成できたのですが、今回はすでにVue CLIを作成しているので後付けでRouterを作成していきます。
npmコマンドでインストール
npmを使ってインストールします。
# ターミナル
$ npm install vue-router
+ vue-router@3.1.6
added 1 package from 1 contributor and audited 25487 packages in 8.931s
42 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
router.jsを作成
router.jsでルーティングを管理していきます。
ルーティングに関わるコンポーネントはviewsディレクトリの配下に格納。
細かな部品はcomponentsディレクトリに格納します。
※Homeは例としてのコンポーネントです。
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home/'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
番外編historyモード
router.jsに
mode: 'history'
という記述がありますが、これはHistory APIを利用してブラウザの戻るボタンなどが使えるようにしているものです。
通常のブラウザであればHistory APIも対応しているはずなので、基本的にはhistoryモードで使います。
router.jsのプロパティ一覧
プロパティ名 | 説明 |
---|---|
base | アプリの基底パス(/) |
path | リクエストのパス |
component | 呼び出すコンポーネント(単体) |
components | 呼び出すコンポーネント(複数) |
redirect | リダイレクト先のパス |
chirdren | 配下のルートの設定 |
props | ルートパラメーターの割り当て |
alias | エイリアスの設定 |
meta | ルートのメタ情報 |
caseSentive | 大文字小文字についての判別 |
使い方
ルーティングのパスの設定
上記を元に今回の例ではaboutパスを踏んだ時に別のページに飛ぶようにします。
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: ()=> import('./views/About')
}
]
})
main.jsでのRouterの有効化
import Vue from 'vue'
import App from './App.vue'
# routerの追記
import router from './router'
Vue.config.productionTip = false
new Vue({
# routerの追記
router: router,
render: h => h(App),
}).$mount('#app')
router-linkタグ, router-viewタグ
routerの設定が完了したらルーティングで設定したコンポーネントをどのようにして呼び出すか定義していきます。
その際に使用されるのがrouter-linkタグです。
※通常のリンクの移動はaタグを用いるところ、特殊なタグを使っています。
router-viewタグはrouter-linkタグは実際に呼び出されたコンポーネントを表示させます。
書き方
書き方としては4通りあり、バインディングで指定したり、pathまたはnameプロパティで指定したりする方法があります。
下記が具体的な書き方です。
<router-link to="about">about</router-link>
<router-link v-bind:to="'/about'">about</router-link>
<router-link v-bind:to="{ path: '/about' }">about</router-link>
<router-link v-bind:to="{ name: 'about' }">about</router-link>
App.vueに追記
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<router-link to="/">Home</router-link>
<router-link to="about">About</router-link>
<router-view/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
番外編 $router.pushメソッド
router-linkタグだとクリックしなければコンポーネントを呼び出すことができません。
しかし、スクリプトでページを丸ごと遷移させるために$router.pushメソッドを用いることで可能となります。
具体的な書き方
具体的にトップへとクリックしたらルートページに戻るようなメソッドを作ります。
# src/views/About.vue
<template>
<div class="about">
<p>Home</p>
<button v-on:click="onclick">トップへ</button>
</div>
</template>
<script>
export default{
methods: {
onclick(){
this.$router.push('/')
}
}
}
</script>
結果
早速実行してみましょう!
# ターミナル
$ npm run serve
パスの指定に合わせてビューが変化しているのがわかりますね
終わりに
シンプルにサクサク動くVue.jsにワクワクしてしまいますね!
まだルーティングの奥は深いのでルートパラメーターについても今後説明していきます。