Question

我有一个看起来像http://127.0.0.1:8000/api/articles/?page=2的分页式API，我希望在Aurelia的前端使用相同的分页。

我为next和previous页面创建了两个按钮：

<button
  type="button"
  click.delegate="getArticles(articles.previous)">prev</button>
<button
  type="button"
  click.delegate="getArticles(articles.next)">next</button>

当我点击next时，会有一个新的GET请求，文章列表会更新，但我还想在网址上添加参数，以便用户可以看到他在第二页上。那么，如何将/?page=2添加到路径的末尾。

我知道如何使用不同的组件作为孩子添加参数，但这次我使用相同的组件。

谢谢。

Answer 1

Aurelia支持开箱即用的路由中的查询参数。您无需在路径本身中定义page参数。所有查询参数仅提供给params方法的activate参数。

import { inject } from 'aurelia-framework';
import { Router, activationStrategy } from 'aurelia-router';

@inject(Router)
export class Articles(Router) {
    constructor(router) {
        this.router = router;
    }

    activate(params) {
        this.page = parseInt(params.page || '1');

        // TODO: Load your articles from the API here
        // this.articles = <fetch call using this.page>
    }

    // This is necessary to tell Aurelia router not to reuse 
    // the same view model whenever navigating between pages
    // so that the activate method gets called each time
    determineActivationStrategy() {
        return activationStrategy.replace;
    }

    // TODO: Check if we can go to previous and next page, etc.
    nextPage() {
        this.router.navigateToRoute('articles', { page: this.page + 1 });
    }

    previousPage() {
        this.router.navigateToRoute('articles', { page: this.page - 1 });
    }
}

将查询参数添加到Aurelia中的路径

1 个答案: