在 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);
}

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

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