概要

前回記事でVue RouterなしのHelloWorld、「vue_app_norouter」を作成し、記述内容を整理しました。
Vueはシンプルで学習コストが低いと紹介されていることが多いのですが、個人的な感想では、Vue CLIを導入するところから難しく感じました。そこにきて、HelloWorldの構造もよくわからず、どこをいじって改変していくのか、初見でわかりませんでした。Vue init webpackで、Vue Routerの使用を選択すると、HelloWorldの内容も変わっています。

Vue Routerなしで作成した「vue_app_norouter」とVue Routerありで作成した「vue_app」の内容を比較し、Vue Routerの役割を確認してみたいと思います。

ソースはGitHubに載せました。

詳細

差分をとる

ディレクトリの差分

ディレクトリ同士でdiffを取って見ました。

$ diff -rq vue_app vue_app_norouter
Files vue_app/README.md and vue_app_norouter/README.md differ
Files vue_app/index.html and vue_app_norouter/index.html differ
Files vue_app/node_modules/.yarn-integrity and vue_app_norouter/node_modules/.yarn-integrity differ
Files vue_app/node_modules/fsevents/build/Makefile and vue_app_norouter/node_modules/fsevents/build/Makefile differ
〜〜省略〜〜
Only in vue_app/node_modules: vue-router
Files vue_app/package.json and vue_app_norouter/package.json differ
Files vue_app/src/App.vue and vue_app_norouter/src/App.vue differ
Files vue_app/src/main.js and vue_app_norouter/src/main.js differ
Only in vue_app/src: router
Files vue_app/yarn.lock and vue_app_norouter/yarn.lock differ

ディレクトリ「router」が増えており、router/index.jsの存在が確認できました。

ファイルの差分

index.html

次にindex.htmlをdiffしてみます。

$ diff vue_app/index.html vue_app_norouter/index.html 
6c6
<     <title>vue_app</title>
---
>     <title>vue_app_norouter</title>

<title>タグだけなので動作には関係ありません。

main.js

次にmain.jsをdiffしてみます。

$ diff vue_app/src/main.js vue_app_norouter/src/main.js 
5d4
< import router from './router'
12d10
<   router,

routerディレクトリのインポート文と、Vueインスタンスの生成時にrouterを読み込んでいます。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Vue Routerなしの場合と同様、el: ‘#app’が<div>タグにVueインスタンスをマウントする指定で、componentsとtemplateにAppが指定されています。

不思議なのは、import 文で、App.vueのimportとrouterディレクトリのimportがどちらも同じ記述であること。.vueとディレクトリはどう識別しているのでしょうか。

App.vue

App.vueのdiffを見てみます。

$ diff vue_app/src/App.vue vue_app_norouter/src/App.vue
4c4
<     <router-view/>
---
>     <HelloWorld/>
8a9,10
> import HelloWorld from './components/HelloWorld'
> 
10c12,15
<   name: 'App'
---
>   name: 'App',
>   components: {
>     HelloWorld
>   }

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
〜〜省略〜〜

<template>の中は、HelloWorldコンポートネントの呼び出しの代わりに<router-view/>があります。
これがVue Routerの定義に沿って描画されるだろうことが推測できます。

一方export default {}の中は、すっきりしています。
これだけでいいんですね。

router/index.js

では、Vue Routerのindex.jsを見てみます

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

import文でvue-routerとHelloWorldを読み込んでいることがわかります。

RouterインスタンスでどのURLにアクセスしたら(‘/’)、どのコンポートネントに割り振るか(‘HelloWorld’)を設定しているようです。

HelloWorld.vue

最後にHelloWorldを見てみますが、差分はありません。

$ diff vue_app/src/components/HelloWorld.vue vue_app_norouter/src/components/HelloWorld.vue 
$

 

まとめ

まとめると index.html -> main.js -> App.vue -> router/index.js -> HelloWorld.vue の順に入れ子になっていることが確認できました。
この構造を見るに、独自の処理を記述するなら、HelloWorld.vueをコピペして書き換え、ルーティングのパスをrouter/index.jsに追加するのが良いと考えています。