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のおすすめ書籍はコチラ -
コメント