LoginSignup
4

More than 5 years have passed since last update.

pugで書くRiot Routerの開発環境メモ

Last updated at Posted at 2017-10-02

はじめに

pugで書くRiotの開発環境メモ の続き
Riotの公式RouterであるRiot Routerが動くことが目的なので,それ以外の設定は手抜きです.
pugでスイスイ~っとルーティングするぞ!
Riotのバージョンは3.7.3
Riot Routerのバージョンは3.1.2

ソース

  1. git cloneしたらyarnしてyarn watchしてください.
  2. live-serverが起動するので,コードをいじって保存すれば自動でコンパイルし,ブラウザがリロードされます.

構成は前回と全く同じです.
変わった事といえば,dependenciesriot-routeが入ったぐらい.

動作確認

ページ上部に4つのaタグのリンクが表示されます.
それぞれ,

  1. ページをリロードしてトップページに飛ぶ href="/"
  2. トップページに飛ぶ href="#"
  3. フルーツページに飛ぶ href="#fruit"
  4. 検索ページに飛びクエリを投げる 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.tagtopsearchなどのタグを一緒に書いて定義しましたが, 実際にはちゃんとファイルに分けたほうがいいと思います.
  • 今回は使いませんでしたが,route.stop()route.base('/app')route.create()なども場合によっては必要になってくるので,いい感じに組み込んでください.(雑)

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4