webにおけるルーティングとは
ルーティング（routing）とは、「経路を指定すること」。ネットワークの分野でよく使われる用語で、そこではパケットの送受信の経路を指定するという意味で使われる。
webアプリでは「どのURLが指定されたときにどのような応答を返すか」を指定することを指す。例えば「mywebsite.com/hogeというURLにリクエストが来たらhoge.htmlを返す」「mywebsite.com/user_profileにリクエストが来たらユーザの情報のjsonを返す」といったことを指定する。
Vue Routerでルーティングするメリット
ルーティング機能自体はExpressやFlaskにも備わっているのだが、Vue Routerには特別なメリットがある。それは「画面全体を再読み込みすることなく画面表示を切り替えることができる」ということだ。
インターネット最初期、webで画面を遷移するには再度httpリクエストを飛ばして再読み込みする必要があった。JavaScriptの規格が確立されていわゆるAjaxの時代がはじまると、webページ全体の表示と非同期に通信を行い、webページの一部分（DOM）だけを更新することができるようになった。それでもその処理を逐次記述しないといけなかったり、特にDOMの書き換えにはDOMを取得して処理して更新するということをいちいち書かないといけなかったので、実装は非常に煩雑だった。そこで、そういった煩雑さを解消するためにVueなどのwebフレームワークが開発された、という経緯がある。
このような画面全体の更新を伴わないwebアプリをSPA（Single Page Application）という。
Vue Routerのインストール
Vueプロジェクトをcreateするときに、presetを選択するところで「Manually select features」を選択し、「Router」にチェックを入れる。
すでにcreateしたVueプロジェクトにRouterを追加するときは、vue add routerとする。
ルーティング設定
ルーティングの設定は、プリセットされているrouter/index.jsに記述する。routesリストにプリセットと同じようなjsonを追加する。もちろん追加するモジュールはimportしておく。
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ]
templatesへの書き込み
Vue Routerで書き換える表示部分は、vueモジュールのtemplates部分に<router-view/>と記述する。またvue-routerでルーティングするためのリンクは、通常の<a href>のようなタグではなく<router-link>を使う。
<template> <div id="app"> <div class="globalMenu"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template>
