在路由映射 URL 中添加查询字符串答案

【问题标题】：Add query string in route map URL在路由映射 URL 中添加查询字符串
【发布时间】：2016-10-07 12:48:22
【问题描述】：

我使用的是 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');
 });

上面的代码生成以下 URL "localhost:4200/books/?page=0&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>

任何帮助都应该感激。

【问题讨论】：

标签： ember.js ember-data ember-cli

【解决方案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 。

【讨论】：

是的。根据您的回答进行了修改。第一次导航时，我在 URL 中看不到任何查询参数。如果我返回到其他一些链接，然后导航到此页面，我可以看到具有空值的查询参数。它没有选择默认值。
/books?page=null&perPage=null ....2-场景 1) 初始启动-我看不到查询参数。 2) 导航时 - 我可以看到具有空值的查询参数 (/books?page=null&perPage=null)
您的导航如何？创建了twiddle，你可以检查实现。
我更新了我的问题，你可以看到导航链接。我没有传递任何查询参数，所以默认情况下它应该采用默认值。对吗？
试试这个{{#link-to "books.index" (query-params page=1 perPage=50) class="nav-link vf-nav-books"}} Books {{/link-to}}

【解决方案2】：

据我所知，您无法执行您在控制器中声明的queryParams（至少在 Ember 2.8 之前），如 documentation 中所述。

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

import Ember from 'ember';

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

在浏览您的应用程序时，您可以使用 link-tohelper 设置查询参数，如下所示

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

【讨论】：