vue-routerを使ってみる。静的ルートマッチと動的ルートマッチ

スポンサーリンク
Pocket
LINEで送る

Vuejsを使ってSPAを作れるようになるためにvue-routerというもの使ってみます。

vue-routerとはVuejsのルーターライブラリです。

これを使うことによって画面を読み込むことがなくURLとコンテンツがポンポン切り替わりっていきます。

リファレンスはこちら

 

vue-routerの使い方

必要なファイルを用意します。

・vuejs本体

以下のリンクから「vue.min.js」ダウンロード

https://github.com/vuejs/vue

 

・vue-router

以下のリンクからダウンロードするか「https://unpkg.com/vue-router@2.0.0/dist/vue-router.js」これを読み込む

https://github.com/vuejs/vue-router

 

ほぼサンプル通りです。

html

<!DOCTYPE>
<html>
 <head>
 <script src="vue.min.js"></script>
 <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
 <script src="main.js"></script>
 </head>
 <body>
 <div id="app">
 <h1>vue-router Sample</h1>
 <p>
   <router-link to="foo">Go to Foo</router-link>
   <router-link to="bar">Go to Bar</router-link>
 </p>
 <router-view></router-view>
 </div>
 </body>
</html>

 

router-linkのtoにプロパティをセットします。

これをページを読み込むとaタグに変換されてリンク先はfooやbarなど指定したプロパティになります。

router-viewの中にはURLと一致するコンポーネントが表示されます。

スポンサーリンク

 

javascript

window.onload = function(){

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]
const router = new VueRouter({
 routes // routes: routes の短縮表記
})
const app = new Vue({
 router
}).$mount('#app')

}

※javascript ES6で書かれています。

const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]

これでパスが/footのとき、Fooというコンポーネントが呼ばれ、/barのときは、Barが呼ばれます。

 

動的にルートマッチさせる

会員制のサービスやブログなど動的にURLが変わる場合があります。

例:

ユーザー「notsleeeping」さんのページ

users/notsleeeping

この場合はroutesの中に以下を追加します。

  { path: '/users/:username', component: User }

これで、usersの以下が動的に変更されてもマッチできます。

 

vue側でusernameを受けとるには

const User = { template: '<div>User{{$route.params.username}}</div>' }

これでURLのusernameがviewで受け取れます。

 

ルートの優先度は宣言する順番で決まり、先に宣言した方が優先度が高くなります。

users/editというユーザー情報を編集するページとusernameがeditの人がいた場合、以下のように宣言すると編集ページが表示される。順序を逆にするとeditさんの詳細ページが表示される。

  { path: '/users/edit', component: Edit }
  { path: '/users/:username', component: User }

 

https://router.vuejs.org/ja/