Add query string in route map URL

0
votes

I am using Ember 2.7. Is there any way to specify query parameters in the route map 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');
 });

The above code is generating following URL "localhost:4200/books/?page=0&perPage=25", I am not sure why it is adding slash before the query params.

Navigation

<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>

Any help should be appreciated.

2
ember.jsember-dataember-cli

2 Answers

3
votes

The below code is wrong. 

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

You need to consider queryParams so define page and perPage inside controller.this.route('index', {path: '/'}); it will be added by default, you don't need to include this in router.js. guide link

Created Sample Twiddle for demo.

import Ember from 'ember';

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

For this.route('view', {path: '/view/:bookIdid'}); consider to implement dynamic segments. guide link

It's good to follow ember convention for defining dynamic segments, instead of bookIdid replace it with :model-name_id .

0
votes

To my knowledge there's no way to do what you (at least up to Ember 2.8), queryParams are declared in the controller, like stated in the documentation.

You have to declared them in the controller like this:

import Ember from 'ember';

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

When navigating through your application you can you the link-tohelper to set query params, like this

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