如何安装/设置Aurelia路由器/路由 [英] How to install/setup Aurelia router/routes
问题描述
我希望页面顶部有几个链接，当单击它们时，在同一页面上会向用户显示不同的视图.我想从头开始设置.
I want a few links at the top of my page, and when they are clicked, different views are presented to the user on the same page. I want to set this up from scratch.
我在网上看到了一些有关此工作方式的示例，但是当我尝试使用Arelia todo示例作为基准从头进行设置时(
I've seen a few examples online of this working but when I try to set it up from scratch using the Arelia todo example as a baseline (http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start), I seem to missing something. I assume I need to install the Aurelia router but there are no instruction anywhere to do this ( that I can find). The read me at the Github page does not give instructions on how to install it.
我所知道的.
我将需要一个具有路由并且看起来像这样的app.js文件:
I will need an app.js file that has the routes and looks something like this:
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{route: ['','home'], name: 'home', moduleId: 'components/home/home', nav: true, title: 'Home'},
{route: ['settings'], name: 'settings', moduleId: '/settings/settings', nav: true, title: 'Settings'}
]);
this.router = router;
}
}
我将需要一个类似于以下内容的app.html文件(这将循环遍历先前代码中的对象并访问其属性).
I will need an app.html file that looks something like this ( this loops through the objects in the previous code and accesses their properties).
<template>
<nav>
<ul>
<li repeat.for="row of router.navigation"> <!--Loop through routes-->
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</nav>
<router-view></router-view>
<hr>
</template>
结果是空白页，没有错误.我放置在app.html上的任何静态HTML都将呈现，但除此之外-没有任何东西.
The results is a blank page with no errors. Any static HTML I place on app.html will render but other than that - nothing.
推荐答案
如果您跟踪Aurelia网站上的示例，那么您会注意到其教程中的main.js是
If you're following on from the example from the Aurelia website, then you will have noticed that the main.js in their tutorial is
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
将此更改为
export function configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
根据我的快速入门经验，我还必须在index.html中添加"aurelia-routing.min.js".所以我的index.html看起来像:
In my experience with the quick starter, I had to also add into the index.html the "aurelia-routing.min.js". So my index.html looks like:
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-typescript.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script src="scripts/aurelia-routing.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
If however you're starting to get more into Aurelia, I suggest you start with their next tutorial
这篇关于如何安装/设置Aurelia路由器/路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
