r语言 - Riot.JS 使用基于标签的路由时无法处理子路由

Question

我在使用防暴路由器时无法处理子路由

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

• 用户/苏吉特/编辑
• 用户/苏吉特/视图
• 用户/苏吉特/摘要

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

这是 plunkr 网址code plunkr 源代码 direct preview link ： link

Answer 1

您匹配的每个"*"都将作为属性传递到您的标签中("route"， ...

例如，如果您输入您的app-user.tag

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

您将能够从路由器中捕获两个"*">

Answer 2

您可以覆盖默认解析器方法，以便生成自己的路由器令牌。在这种情况下，我覆盖了..令牌以匹配所有 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

Answer 3

使用 ... 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;
})