0

使用 riot-router 时我无法处理子路由

即，我想在我的应用程序中处理子路由，例如

  • 用户/sujeet/编辑
  • 用户/sujeet/视图
  • 用户/sujeet/摘要

在我的app-user.tag 中，我只能提取第一级细节，但不能将整个子路由提取到令牌中。

这是 plunkr url code plunkr 源代码 direct preview link：link

4

3 回答 3

0

您可以覆盖默认解析器方法以生成您自己的路由器令牌。在这种情况下，我覆盖了..令牌以匹配所有 url 片段

route.parser(null, function(path, filter) {
  const f = filter
    .replace(/\?/g, '\\?')
    .replace(/\*/g, '([^/?#]+?)')
    .replace(/\.\./, '.*');

  const re = new RegExp(`^${f}$`);
  const args = path.match(re);

  if (args) { 
    const value = args.slice(1)
    if (value.length) return value
    else return args[0].split('/')
  }
})

我已经分叉了您的初始示例，因此请检查您的浏览器控制台以查看在您的组件http://plnkr.co/edit/tom6c1YWZQBeFZWTwcdv?p=preview中收到的参数

于 2018-03-06T20:55:54.033 回答
0

您匹配的每个“*”都将作为标签内的属性传递 on("route", ...

因此，例如，如果您放入 app-user.tag

this.on("route", (id, verb) => {
  this.id = id
  this.verb = verb
})

您将能够从路由器中捕获两个“*”

于 2018-03-06T20:16:50.100 回答
0

使用... spread operator或arguments var。

this.on("route", (...args) => {
  this.id = args[0];
  this.verb = args[1] || null;
})

或者

var self = this;
self.on("route", function(){
  self.id = arguments[0];
  self.verb = arguments[1] || null;
})
于 2018-03-07T10:23:41.890 回答