2017/12/13
javascriptフレームワークのvue.jsを使ってみる④（vue-router）
これまでにも少しvue.jsを触っていましたが、今回はRouterを使用してみたいと思います。
今までのは以下のようになってます。
javascriptフレームワークのvue.jsを使ってみる（入門編）
javascriptフレームワークのvue.jsを使ってみる②（ソート機能っぽいもの）
javascriptフレームワークのvue.jsを使ってみる③（簡単TODOリスト）
vue-routerとは？
vue.jsを使用してサイトを作る際ルーティングを設定したい場合、使用する公式ライブラリです。
vue.jsを使う場合は、SPAが多いと思いますが、今回は普通のサイトの形でやってみました。
ページのメニューがあり、そこを押下するとそのページに飛ぶみたいな感じです。
vue-routerを使用すると、
・URLがつく
・history(ブラウザの戻るが使用できる)
・メニューに自動的にclassがつく
・遷移のアニメーションが設定できる
・遷移後のスクロールの位置を設定できる
等々ができるようになります。（上記はDEMOサイトで試したものでもっと他にもあります）
vue.jsは環境構築しなくても使え、vue-routerもある程度まではそれでも使えるようなので、
今回は簡単なところまでやってみました。
ページの内容をコンポーネント化して別ファイルにする場合なんかはコンパイルが必須になるようです…
vue-routerを使ってみる
vue-routerはvue同様、基本的にはファイルを読み込みます。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div id="wrapper"> <header id="header"> <h1><router-link to="/"><img src="img/logo.png" alt=""></router-link></h1> <nav class="gNavi"> <ul><li><router-link to="/message">メッセージ</router-link> </li><li><router-link to="/company">会社紹介 </router-link></li><li><router-link to="/work">仕事内容 </router-link></li><li><router-link to="/culture">会社の文化 </router-link></li><li><router-link to="/entry">応募 </router-link></li></ul> </nav> <!--//header --></header> <div class="contents"> <transition name="fade"> <router-view></router-view> </transition> <!--//contents --></div> <!--//wrapper --></div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script src="common.js"></script> |
router-link
こちらはリンクの設定タグで要は、aタグみたいな感じです。
toにリンク先が入ります。このtoに入っているもののパスが設定されてないとエラーになります。
このタグを使用すると、そのリンク先のコンポーネントを表示している時は、自動的にclassが付与されます。
router-view
router-linkで遷移させた時に、リンク先のコンポーネントがここに表示されます。
transition
のタグで囲むとアニメーションしながら遷移してくれるようで、今回はfadeを設定しました。
jsでアニメーション設定させてるのかと思いきや、classを付け外ししているだけなので、cssで設定する必要があります。
JSの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | //テンプレートの設定 var Message = { template: ` <div class="page page--message"><p>Message</p></div> ` } var Company = { template: ` <div class="page page--company"><p>Company</p></div> ` } var Work = { template: ` <div class="page page--work"><p>Work</p></div> ` } var Culture = { template: ` <div class="page page--culture"><p>Culture</p></div> ` } var Entry = { template: ` <div class="page page--entry"><p>Entry</p></div> ` } var Home = { template: ` <div class="page page--home"><p>Home</p></div> ` } //ルーティングの設定 var routes = [ { path: '/message', component: Message,meta: { title: 'Message',desc: 'Messageの説明' } }, { path: '/company', component: Company,meta: { title: 'Company',desc: 'Companyの説明' } }, { path: '/work', component: Work,meta: { title: 'Work',desc: 'Workの説明' } }, { path: '/culture', component: Culture,meta: { title: 'Culture',desc: 'Cultureの説明' } }, { path: '/entry', component: Entry,meta: { title: 'Entry',desc: 'Entryの説明' } }, { path: '/', component: Home,meta: { title: 'Home',desc: 'Homeの説明' } } ] var router = new VueRouter({ //mode: 'history', routes: routes, scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } }); //titleとdescriptionを変更 router.beforeEach((to, from, next) => { document.title = to.meta.title; document.getElementsByTagName("meta")["description"].setAttribute('content',to.meta.desc); next(); }); var app = new Vue({ router }).$mount('#wrapper'); |
まずは、テンプレート設定ですが、ここに書いた内容がrouter-viewに表示されます。
ちゃんとしたものを作る場合は、ここは別ファイルにしたほうがいいのですが、今回はテストのためこれで…
ルーティングの設定では、いわゆるurlと、先程設定したコンポーネント、あとは今回,titleやdescriptionも変更できるようにしました。
ここのpathとrouter-linkが合っていないとエラーになります。
そして、後はお決まりのように設定していくのですが、
|
1 2 3 | scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } |
これによって、遷移後のスクロールの位置を設定することができます。
(今回のDEMOはページの高さがないのでわかりにくいですが…)
titleとdescriptionを変更は、beforeEachというメソッドを使用して変更しています。ここは普通のjsですね。
ざっとして説明になりましたが、試しにvue-routerを使った例になります。
思いの外ソースは少なく、設定も簡単にできたように思います。
今度は、環境構築して(といってもvue-cliかな)、アプリっぽいものを作って試してみたいですね…
Author Profile
スターフィールド編集部
SHARE
