历史(History)
优质
小牛编辑
131浏览
2023-12-01
在本章中,您将学习如何使用aurelia-history插件。
第1步 - 安装插件
此插件已作为标准配置的一部分提供。 如果您已将aurelia.use.standardConfiguration()设置为手动配置的一部分,那么您就可以开始了。
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot());
}
第2步 - 使用历史记录
我们将使用上一章( Aurelia - Routing )中的一个例子。 如果我们想要设置向后或向前导航的功能,我们可以使用带有back()和forward()方法的history对象。 我们将在路由器配置后添加它。
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['','home'], name: 'home',
moduleId: './pages/home/home', nav: true, title:'Home' },
{ route: 'about', name: 'about',
moduleId: './pages/about/about', nav: true, title:'About' }
]);
this.router = router;
}
goBack() {
history.back();
}
goForward() {
history.forward();
}
}
现在,让我们在view添加两个按钮。
app.html
<template>
<nav>
<ul>
<li repeat.for = "row of router.navigation">
<a href.bind = "row.href">${row.title}</a>
</li>
</ul>
</nav>
<button click.delegate = "goBack()"></button>
//The button used for navigationg back...
<button click.delegate = "goForward()"></button>
//The button used for navigationg forward...
<router-view></router-view>
</template>
用户可以通过单击我们添加的按钮来前后导航。