在本章中,您将学习如何使用 aurelia-history 插件.
此插件已作为标准配置的一部分提供.如果您已将 aurelia.use.standardConfiguration()设置为手动配置的一部分,那么您就可以开始使用了.
export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging(); aurelia.start().then(() => aurelia.setRoot()); }
我们将使用上一章中的示例( Aurelia - 路线).如果我们要设置向后或向前导航的功能,我们可以使用 back()和 forward()方法使用历史对象.我们将在路由器配置后添加它.
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(); } }
现在,我们在视图中添加两个按钮.
<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>
用户可以通过单击我们添加的按钮来前后导航.