Question

我正在使用Ember 2.7。有没有办法在路由映射URL

中指定查询参数

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
    location: config.locationType
});

Router.map(function() {
    this.route('index', {path: '/'});

    this.route('books', function() {
        this.route('index', {path: '?page=0&perPage=25'});
        this.route('view', {path: '/view/:bookIdid'});
        this.route('new');
 });

以上代码生成以下网址“localhost：4200 / books /？page = 0＆amp; perPage = 25”，我不知道为什么在查询参数之前添加斜杠。

导航

<ul class="nav nav-pills">
<li class="nav-item">
  {{#link-to "products.index" class="nav-link vf-nav-types"}} Product Types{{/link-to}}
</li>
<li class="nav-item">
  {{#link-to "books.index" class="nav-link vf-nav-books"}} Books {{/link-to}}
</li>
<li class="nav-item">
  {{#link-to "apps.index" class="nav-link vf-nav-application"}} Application {{/link-to}}
</li>

任何帮助都应该受到赞赏。

Answer 1

以下代码错误。

this.route('index', {path: '?page=0&perPage=25'});

您需要考虑queryParams，以便在控制器内定义page和perPage。this.route('index', {path: '/'}); 它将默认添加，您不需要在router.js中包含它。 guide link

为演示创建了Sample Twiddle。

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['page','perPage'],
  page: 1, //1 is default value
  perPage:25,
});

考虑this.route('view', {path: '/view/:bookIdid'});实施动态细分。 guide link

最好遵循用于定义动态细分的ember约定，而不是bookIdid将其替换为:model-name_id。

Answer 2

据我所知，你无法做到（至少达到Ember 2.8），queryParams在控制器中声明，如documentation中所述。

你必须在控制器中声明它们：

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['category'],
  category: null //or some other default value
});

在您的应用程序中导航时，您可以使用link-to帮助程序设置查询参数，如下所示

{{#link-to "someroute" (query-params category="something")}}Go!{{/link-to}}

在路线图网址

2 个答案: