query-param example

browse.collection.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: [{
    ctrl: {
      type: 'string'
    }
  }]
});

browse.collection.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

browse.collection.template.hbs

<h2>
  browse/collection/template.hbs#ctrl {{this.ctrl}}
</h2>

{{outlet}}

browse.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: [{
    ctrl: {
      type: 'string'
    }
  }]
});

browse.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

browse.template.hbs

<h3>
  browse/template.hbs#ctrl {{this.ctrl}}
</h3>

{{outlet}}

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

game.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: [{
    ctrl: {
      type: 'string',
      as: 'game:ctrl'
    }
  }]
});

game.pdp.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: [{
    ctrl: {
      type: 'string',
      as: 'game.pdp:ctrl'      
    }
  }]
});

game.pdp.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

game.pdp.template.hbs

<h3>
  game/pdp/template.hbs#ctrl {{this.ctrl}}
</h3>

{{outlet}}

game.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

game.template.hbs

<h2>
  game/template.hbs#ctrl {{this.ctrl}}
</h2>

{{outlet}}

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('game', function() { 
    this.route('pdp')
  })
  
  this.route('browse', function() {
    this.route('collection')
  })
});

export default Router;

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

<div>
  {{link-to 
    "browse?ctrl=dog" 
    "browse" 
    (query-params ctrl="dog")
  }}
</div>
 
<div>
  {{link-to 
    "game?ctrl=dog" 
    "game" 
    (query-params ctrl="dog")
  }}
</div>

<div>
  {{link-to 
    "game.pdp?ctrl=dog" 
    "game.pdp" 
    (query-params ctrl="dog")
  }}
</div>

<br>
<br>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}