はじめに
pugで書くRiotの開発環境メモ の続き
Riotの公式RouterであるRiot Routerが動くことが目的なので，それ以外の設定は手抜きです．
pugでスイスイ～っとルーティングするぞ！
Riotのバージョンは3.7.3
Riot Routerのバージョンは3.1.2
ソース
-
git cloneしたらyarnしてyarn watchしてください． -
live-serverが起動するので，コードをいじって保存すれば自動でコンパイルし，ブラウザがリロードされます．
構成は前回と全く同じです．
変わった事といえば，dependenciesにriot-routeが入ったぐらい．
動作確認
ページ上部に4つのaタグのリンクが表示されます．
それぞれ，
- ページをリロードしてトップページに飛ぶ
href="/" - トップページに飛ぶ
href="#" - フルーツページに飛ぶ
href="#fruit" - 検索ページに飛びクエリを投げる
href="#search?keyword=hello"
という動作をします．
具体的には
-
example.com,example.com/,example.com/#ではtopタグを表示 -
example.com/#fruitではfruitタグを表示 -
example.com/#search?keyword=helloではsearchタグを表示します．またroute.query()でクエリの取得も行います． - その他のパスは
otherタグで404と表示します． - URLの変更やブラウザの進む/戻るボタンでも動作します．
コードと軽い説明
コードで変わったのはapp.tagだけです．
app.tag
app
nav
a(each='{link in links}' href='{link}') {link}
router
route(path='')
top
route(path='fruit')
fruit
route(path='search..')
search
route(path='..')
other
style.
a {
margin: 1rem;
font-size: 2rem;
}
script.
this.links = ['/', '#', '#fruit', '#search?keyword=hello']
top
h1 top page
fruit
h1 fruit page
search
h1 search page
p(each='{value, key in query}') {key}: {value}
script.
import route from 'riot-route/lib/tag'
this.on('route', () => this.query = route.query())
other
h1 404
重要なのは，この部分↓
router
route(path='')
top
route(path='fruit')
fruit
route(path='search..')
search
route(path='..')
other
ここでfruit，searchといったタグを表示する設定をしています．
v3.1からタグベースでのルーティングが出来るようになりました．（とてもよい）
ただし，これを使うにはimport route from 'riot-route'の代わりに import route from 'riot-route/lib/tag' とする必要があるので，注意！！（公式ドキュメントにのってるけど）
最後に
- Riotだけでもドキュメント読みづらかったり，人口少ないのに，Riot Routerとなるとホントに参考になるサイトが少なくて困りました．誰かの役に立てばいいなと思います．
- ハッシュ
#ではなく，/のみでルーティングしたい場合には，いきなり下の階層にアクセスると404が出るので，サーバでSPA用の設定をしてやってください． - また，ファイル数が多くなるのを避けるために
app.tagにtopやsearchなどのタグを一緒に書いて定義しましたが，
実際にはちゃんとファイルに分けたほうがいいと思います． - 今回は使いませんでしたが，
route.stop()やroute.base('/app')，route.create()なども場合によっては必要になってくるので，いい感じに組み込んでください．（雑）