在Aurelia中创建NavigationStrategy

Question

我正在尝试使用Aurelia作为我的自定义Wordpress主题的平台。

我想做的是在Wordpress中定义我的导航菜单，使用菜单的Wordpress插件通过Wordpress API将菜单公开为JSON字符串，然后在Aurelia中构建导航菜单。

到目前为止，我发现的所有内容都涉及到创建一个简单的单行菜单。

有没有人这么做过，或者能给我指个方向？

Answer 1

由于您正在使用服务器端数据来构建导航菜单，因此您不妨让服务器来完成这项繁重的工作，并让它为您的路由器生成一个现成的配置。

让你的插件像这样生成JSON：

{
  "routes": [
    {
      "route": "\"...\"",
      "moduleId": "\"...\"",
      "settings": {
        "childRoutes": [
          {
            "route": "\"...\"",
            "moduleId": "\"...\"",
          }
        ]
      }
   ]
}

然后，在你的根视图模型的configureRouter中，你可以这样做：

async configureRouter(config, router) {
  const resp = await http.fetch("api/menu-plugin-uri");
  const json = await resp.json();
  config.map(json.routes);
}

子路由存储在配置的settings对象中，这意味着我们可以使用它来构建导航菜单，并且可以在子路由中访问它，如下所示：

configureRouter(config, router) {
  const parentConfig = router.parent.currentInstruction.config;
  config.map(parentConfig.childRoutes);
}

这并不能给你很好的带有isActive和所有东西的NavModels，但是当涉及到嵌套导航菜单时，这已经是目前最好的了。

实际上，我自己正在开发一个plugin，试图解决其中的一些限制，尽管还没有准备好投入生产。