vue-routerとは?
vue-routerを用いることでURLにより表示するコンポーネントを制御することができます。Vue.jsでシングルページアプリケーションの構築する場合には必須といっていいほど利用されています。
vue-routerの基礎的な部分を以下のサンプルを用いて説明していきます。
vue-routerの導入方法
インストール
次のコマンドでインストールします。yarnを使っている場合は置き換えてください。
$npm install vue-router
router.js の作成
srcディレクトリ内にrouter.jsファイルを以下のように作成し、Routerインスタンスを作成します。
詳細は後程説明します。
import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export default new Router({ mode: "history", routes: [ //ルーティングの設定 ] });
基本的なvue-routerの設定はrouter.jsに記載していきます。
router.js の読み込み
以下のようにしてmain.jsでrouter.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");
これでvue-routerを使う準備が整いました。
router.jsの内容はmain.jsに直接記載しても良いのですが、分けていたほうが管理がしやすいので分けることをおすすめします。
Routerコンストラクタ
vue-routerの基本的な設定はRouterコンストラクタのオプションとして設定します。 一部ではありますが簡単に紹介していきます。
mode
mode
にはhash
, history
, abstract
があり、デフォルトではhash
が設定されます。
アプリケーションにもよりますが、よく使用されるのはhistory
です。通常のWEBページ同様遷移履歴が保存され、ページのリロードなくページ遷移ができるようになります。
routes
routesには具体的なルーティング情報を設定します。
routes: [ { path: '/', //パスの設定 component: Index, //表示するコンポーネント name: 'index', //ルートの名前を指定 }, { path: '/about', component: About, name: 'about', }, ]
name
プロパティについては省略可能です。 他にも設定プロパティはありますが、最低限これだけ覚えていれば大丈夫だと思います。
動的なルーティング
vue-routerではパスの一部をパラメータとして扱うことができます。設定は:
(コロン)を用いて以下のようにします。
routes: [ { path: '/detail/:id', component: DetailId } ]
例えばパスが/detail/001
の場合、idというパラメータ名に値として001が設定されます。
パラメータの参照方法については後述します。
base
base
にはベースURLを指定します。デフォルトでは/
が設定されています。
Routerインスタンス
router.jsで生成したRouterインスタンスはthis.$router
で参照することができ、そのメソッドを利用することができます。
router.push
指定したパスに遷移します。遷移先の指定方法はパスを直に指定するほかに、名前付きルートを指定する方法もありますが、今回は割愛します。
this.$router.push('/about');
router.go
指定した数だけページを進めます。マイナスを指定した場合はその数だけ戻ります。
this.$router.go(1);
router.back
ページを1つ戻します。
router.foward
ページを1つ進めます。
router-view
router-view
は、routes
で設定したパスに一致するコンポーネントを描画するコンポーネントになります。
<div id="app"> <router-view /> </div>
アニメーション
router-view
をtransition
コンポーネントで囲むことでアニメーションの設定ができます。 transition
の説明は別記事で紹介しているのでこちらを参照してください。

router-link
一般的にはページ遷移をする場合にaタグを用いることが多いですが、vue-routerでは代わりにrouter-link
コンポーネントを使用します。
最もシンプルな指定方法は、to
プロパティに遷移先のパスをバインドします。
<router-link to="/about">ABOUT</router-link>
オブジェクトとしてパラメータやクエリの設定をすることも可能ですが今回は割愛します。
DOMへの展開
router-link
はデフォルトだとaタグとしてDOMに展開されます。aタグではなく別のタグとして展開したい場合はtag
プロパティを使用します。
<router-link to="/about" tag="li">ABOUT</router-link>
アクティブなリンク
router-link
では、アクティブなリンクに対してrouter-link-active
とrouter-link-exact-active
クラスを付与します。ただし、2つのクラスの付与条件には違いがあります。
router-link-active
router-link-active
は、to
でバインドしたパスが現在のパスに含まれている場合に付与されます。例えば/detail
を指定したリンクは、/detail
, /detail/001
, /detail/002
のときは付与されます。
router-link-exact-active
router-link-exact-active
は、to
でバインドしたパスと現在のパスが完全に一致した場合に付与されます。同じ例で考えたときに、/detail/001
, /detail/002
ではrouter-link-exact-active
は付与されません。
ルートパスのアクティブ設定
今回のサンプルのように、ルートパスをリンクとして扱う場合には少し工夫が要ります。 通常router-link-active
クラスを指定することでアクティブなリンクのデザインをします。しかし、ルートパスには必ずrouter-link-active
クラスが付与されてしまい、常にアクティブな状態になってしまいます。
これを回避するためにはexact
プロパティを用います。exact
プロパティを指定するとパスが完全一致の場合にのみrouter-link-active
クラスが付与されるようになります。
<router-link to="/" exact>HOME</router-link>
クラス名の変更
2つのクラス名は変更可能で、それぞれactive-class
, exact-active-class
プロパティにクラス名をバインドします。
<router-link to="/about" active-class="active-link" exact-active-class="exact-active-link">ABOUT</router-link>
Routerコンストラクタのオプションでこれらのデフォルト値を変更することも可能ですが、ここでは割愛します。
ルートオブジェクト
ルートオブジェクトには、現在アクティブなルートの情報が設定され、this.$route
によって参照することができます。
参照できる情報には次のようなものがあります。
$route.path
現在のパスを返します。
$route.name
現在のパスの名前を返します。
$route.params
動的なルーティングで設定したパラメータオブジェクトを返します。
今回のサンプルを例にすると、/detail/001
がパスの場合、this.$route.params.id
とすることで001
という値を取得することができます。
$route.query
例えば/detail?id=001
というパスの場合、this.$route.query.id
とすることで001
という値を取得することができます。
$route.fullPath
queryなどを含むすべてにパスを返します。
ネストされたルートの実装
vue-routerはネストすることができ、サンプルのNESTが実際に実装したものになります。
ネストするにはルーティングの際にchildren
オプションを使用します。
routes: [ { path: "/nest", component: Nest, children: [ { path: "", component: Child1 }, { path: "child2", component: Child2 }, { path: "child3", component: Child3 } ] } ]
基本的には同じように設定すればよいのですが、path
を指定する際に最初の/
は不要になります。
パスが/nest
の場合、Nestコンポーネントが表示され、さらにNestコンポーネント内に設定したrouter-view
にはChild1コンポーネントが表示されます。
パスを/nest/child2
にすると、Nestコンポーネントは変わらず表示されており、内部のrouter-view
にChild2コンポーネントが表示されます。
vue-routerは必要?
冒頭にも記述しましたが、Vue.jsでSPA開発するのであればvue-routerを利用したほうがいろいろと便利です。 個人的には必須だと思っています。
今回紹介できていない機能もありますが、一度使ってみてはいかがでしょうか。
- Vue.jsのおすすめ書籍はコチラ -
コメント