Javascript 如何从JSON创建路由的动态列表？

我有一个JSON文件，其中包含使用路由器的基于磁贴的导航应用程序的信息。每个互动程序都可以是直接指向外部应用程序的链接，也可以包含在单击互动程序时显示的子文件。每一个都可能有自己的子系统，等等。JSON最终将由OData服务提供，因此应用程序需要动态创建导航，因为导航可能会发生变化

我如何实现路由器，使URL看起来像

#tile1/tile1-1/tile1-1-3

，这表示用户单击了第一个磁贴，然后进入一个屏幕，在那里他们单击了第一个磁贴，然后在另一个屏幕上单击了第三个磁贴？当来自书签时，该路由将在屏幕上加载来自JSON的tile1-1-3节点的子文件

名称“tile1-1-3”等仅用于在本例中帮助可视化tile的位置。在真实版本中，名称不会指示树中的位置，它们更像是

#MyApps/MyApprovalApps

我有一个递归函数，它遍历每个节点并生成一个单独的路由，但我不确定如何添加动态模式，如

{tile}/{subtile}/{subtile}

，以及我认为需要在两个级别之间正确导航的父路由

我有一个

Home.view.xml

用于显示顶级分幅，还有一个

Page1.view.xml

用于子分幅的其余级别。这是正确的吗？如果没有，如何动态创建视图

希望我的目标是明确的，如果需要，我可以详细说明

创建路由的递归函数：

createRoutes: function(aData, oRouter){
  for(var i=0; i<aData.length; i++){
    oRouter.addRoute({name: aData[i].id,
                      pattern: aData[i].title,
                      view: "Page1"}); //parent?

    if(aData[i].subtiles.length > 0){ // has subtiles        
      this.createRoutes(aData[i].subtiles, oRouter);
    }
  }
}

---

如果我理解正确的话，你会问，你怎么能把点击路径表示成一个字符串，你怎么能把它作为URL的prt传递

参考瓷砖ID

我猜您可以将文本作为对象的JS数组传入（即将此JSON作为URL的一部分）：

a、 b.com/xyz？route=[{“tile1-1”、{“tile1-1”}、{“tile2”、{“tile2-3”}]

这意味着他们单击了tile1->tile1-1->tile2->tile2-3

或者，如果ID可能是安全的或其他的，您可以通过索引号传递它。因为它是一个aray： a、 b.com/xyz？route=[{0，{0}，{0，{2}]

然后求值传递的字符串，将其直接转换为Javascript对象。 或者，如果你担心人们的黑客行为，写一个例程来解释它

（与上面的点击相同）-这取决于瓷砖的排列方式，但从未改变。

这怎么样

createRoutes: function(aData, oRouter, sParentPattern, iViewLevel) {
  iViewLevel = iViewLevel || 0;

  for (var i=0; i<aData.length; i++) {
    var sPattern = sParentPattern ? sParentPattern +"/"+ aData[i].title : aData[i].title;

    oRouter.addRoute({
      name: aData[i].id,
      pattern: sPattern,
      view: "Page1",
      viewLevel : iViewLevel
    });

    if (aData[i].subtiles.length > 0) {        
      this.createRoutes(aData[i].subtiles, oRouter, sPattern, iViewLevel+1);
    }
  }
}

createRoutes:函数（aData、oRouter、sParentPattern、iViewLevel）{
iViewLevel=iViewLevel | | 0；
对于（vari=0；i0）{
this.createRoutes（aData[i].子文件、子文件、子文件、子文件、子文件、子文件、iViewLevel+1）；
}
}
}

---

在本例中，您只需按照建议使用该模式来构建父子关系。

我实际上想使用UI5的路由器机制来处理URL的形成，这也将告诉视图要显示哪些分幅，我想你需要更多地解释一下上下文，我不知道UI5是什么。如果可能的话，也可以提供一个JSFIDLE。我将您的逻辑应用到我自己的版本中，该版本也设置了父路由，效果非常好。现在，仅在有子文件的位置设置路由（没有点为没有子文件的磁贴设置路由），如果它们是子文件，则设置父路由以及代码提供的正确模式。非常感谢。要让这个应用程序正常运行还需要做一些工作，但我真的很喜欢在这个应用程序上解决问题！

createRoutes: function(aData, oRouter, sParentPattern, iViewLevel) {
  iViewLevel = iViewLevel || 0;

  for (var i=0; i<aData.length; i++) {
    var sPattern = sParentPattern ? sParentPattern +"/"+ aData[i].title : aData[i].title;

    oRouter.addRoute({
      name: aData[i].id,
      pattern: sPattern,
      view: "Page1",
      viewLevel : iViewLevel
    });

    if (aData[i].subtiles.length > 0) {        
      this.createRoutes(aData[i].subtiles, oRouter, sPattern, iViewLevel+1);
    }
  }
}