Blog

javascriptフレームワークのvue.jsを使ってみる④(vue-router)

2017.12.12Cat:javascript プログラマー

これまでにも少しvue.jsを触っていましたが、今回はRouterを使用してみたいと思います。

今までのは以下のようになってます。

javascriptフレームワークのvue.jsを使ってみる(入門編)
javascriptフレームワークのvue.jsを使ってみる②(ソート機能っぽいもの)
javascriptフレームワークのvue.jsを使ってみる③(簡単TODOリスト)

vue-routerとは?

vue.jsを使用してサイトを作る際ルーティングを設定したい場合、使用する公式ライブラリです。

はじめに · vue-router

vue.jsを使う場合は、SPAが多いと思いますが、今回は普通のサイトの形でやってみました。
ページのメニューがあり、そこを押下するとそのページに飛ぶみたいな感じです。

vue-routerを使用すると、
・URLがつく
・history(ブラウザの戻るが使用できる)
・メニューに自動的にclassがつく
・遷移のアニメーションが設定できる
・遷移後のスクロールの位置を設定できる
等々ができるようになります。(上記はDEMOサイトで試したものでもっと他にもあります)

DEMO

vue.jsは環境構築しなくても使え、vue-routerもある程度まではそれでも使えるようなので、
今回は簡単なところまでやってみました。
ページの内容をコンポーネント化して別ファイルにする場合なんかはコンパイルが必須になるようです…

vue-routerを使ってみる

vue-routerはvue同様、基本的にはファイルを読み込みます。

html

router-link

こちらはリンクの設定タグで要は、aタグみたいな感じです。
toにリンク先が入ります。このtoに入っているもののパスが設定されてないとエラーになります。
このタグを使用すると、そのリンク先のコンポーネントを表示している時は、自動的にclassが付与されます。

router-view

router-linkで遷移させた時に、リンク先のコンポーネントがここに表示されます。

transition

のタグで囲むとアニメーションしながら遷移してくれるようで、今回はfadeを設定しました。
jsでアニメーション設定させてるのかと思いきや、classを付け外ししているだけなので、cssで設定する必要があります。

JSの設定

まずは、テンプレート設定ですが、ここに書いた内容がrouter-viewに表示されます。
ちゃんとしたものを作る場合は、ここは別ファイルにしたほうがいいのですが、今回はテストのためこれで…

ルーティングの設定では、いわゆるurlと、先程設定したコンポーネント、あとは今回,titleやdescriptionも変更できるようにしました。
ここのpathとrouter-linkが合っていないとエラーになります。

そして、後はお決まりのように設定していくのですが、

これによって、遷移後のスクロールの位置を設定することができます。
(今回のDEMOはページの高さがないのでわかりにくいですが…)

titleとdescriptionを変更は、beforeEachというメソッドを使用して変更しています。ここは普通のjsですね。

ざっとして説明になりましたが、試しにvue-routerを使った例になります。

思いの外ソースは少なく、設定も簡単にできたように思います。

今度は、環境構築して(といってもvue-cliかな)、アプリっぽいものを作って試してみたいですね…

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ