В этой главе вы узнаете, как использовать плагин 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 () . Мы добавим это после настройки маршрутизатора.
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(); } }
Теперь давайте добавим две кнопки в нашем представлении .
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>
Пользователи могут перемещаться назад и вперед, нажимая кнопки, которые мы добавили.