7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

riot-router経由でoptsパラメーター&クエリを渡せない時の対処

Posted at

つらさ

optsでテンプレートがパラメーターが受け渡せると聞いていたのに、なぜか渡っていない。

環境

riot.js v2.5

ルーター間でパラメーターを渡している例

app.js
// http://localhost:3000/hoge/1?page=2&limit=20
riot.route('/hoge/*..', function(itemId) {
  var q = riot.route.query(); 
  console.info('itemId: ' + itemId); // 1
  console.log('Page: ' + q.page); // 2
  console.log('Page: ' + q.limit); // 20
  tagName = 'hoge';

  riot.mount('content', tagName, 
  {
    id: itemId,
  });
});
hoge.tag
<script>
console.log(JSON.stringify(opts.__proto__.id)); // idが取れる
console.log(JSON.stringify(opts.id)); // idが取れない
</script>

子タグに対しての受け渡しであればoptsが利用できるが、ルーター経由での受け渡しでは__proto__が必要になるので注意。

クエリ付きルーティングの罠

idもうまく渡せない罠があるので合わせて注意しましょう。

http://localhost:3001/hoge/12?page=2 // id=1。1桁しか取れていない
http://localhost:3001/hoge/12/?page=2 // id=12。正しく取れる

参考issueはこちら。
https://github.com/riot/riot/issues/1820

7
7
0

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
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?