具有不同页面格式的 aurelia 页面

aurelia pages with different page formats

在 Aurelia SPA 模板中,它假定每个页面都在 app.html 内,并在顶部使用相同的导航栏。但是我会有很多页面不想在顶部使用导航栏,实际上根本不使用 app.html。我正在查看 main.js 并且看起来我可以连接到 bootstrap() 并更改某些页面的 aurelia.setRoot() (我只是在这里猜测),但后来我开始弄乱 main.js 文件,不久它就会变得非常混乱和令人头疼的维护问题。我真的只是想让一些页面完全使用它们自己的格式并忽略 app.html 格式而不做任何疯狂的配置。

我最初的想法是 app.html 应该只是一个空文件,让每个页面决定是否需要导航栏并将其包含在各个页面上。但是现在我在许多页面上复制代码,如果标准页面布局发生变化,我必须更改所有单独的页面。不确定最好的方法来解决他的问题。有什么建议吗?

如您所说,使用 set root 是个坏主意。与您所说的类似,您可以使 app.html 仅包含路由器视图标记。您想要共享相似页面布局的应用程序的不同部分将被分组在不同的路径下。现在,这些路由中的每一个都将指向另一个在视图中具有不同样式的路由器

只要把它想象成一个空的 app.html 和子 app.html 的,其中有样式(例如不同的导航栏、页面布局等)

我其实不同意吉尔伯特的回答。使用 .setRoot 是最佳做法;根只是 parent view/viewModel 对,您通常会有不同的 parent。这基本上就是您在创建一个空应用程序 view/viewModel、创建一个不执行任何操作的新 parent 时所做的事情。但是添加一个不必要的、未使用的层只是额外的复杂化。

最好的用例之一是登录页面。登录页面与您的普通应用程序页面完全不同——有登录提示,没有导航栏等。因此,创建一个 "login" 应用程序根目录和一个 "app" 应用程序根目录并在两者之间来回切换他们。我已经构建了一个名为 Sentry 的模板来演示如何执行此操作。

Sentry in action

Sentry on GitHub