NestedRouteParams

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

controllers.search\.js

import Controller from '@ember/controller';

export default class SearchController extends Controller {
  reset() {
    this.query = {};
  }

  get query() {
    let { q } = this;
    let query = JSON.stringify({ q });
    if (query !== '{}') {
      return JSON.parse(query);
    }
  }

  set query({ q }) {
    this.setProperties({ q });
  }

  @action
  handleFilterByKeyword(q) {
    if (isBlank(q)) {
      this.query = {};
    } else {
      this.query = { q };
    }
  }
}

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('search', function () {
    this.route('modules');
    this.route('providers');
  });
});

export default Router;

routes.search.index\.js

import Route from '@ember/routing/route';

export default class SearchIndexRoute extends {
  redirect () {
    this.replaceWith('search.modules');
  }
}

routes.search.modules\.js

import Route from '@ember/routing/route';

export default class SearchModulesRoute extends Route {
  queryParams = {
    page: { refreshModel: true },
    providers: { refreshModel: true, replace: true }
  };

  model() {
    let { q } = this.modelFor('search');
    return { q };
  }

  resetController(controller, isExiting, transition) {
    let from = transition?.from?.queryParams?.q;
    let to = transition?.to?.queryParams?.q;
    if (isExiting || (transition && from !== to)) {
      controller.reset();
      controller.set('q', to);
    }
  }

  setupController(controller, { q }) {
    controller.set('q', q);
  }
}

routes.search.providers\.js

import Route from '@ember/routing/route';

export default class SearchProvidersRoute extends Route {
  queryParams = {
    page: { refreshModel: true },
  };

  model() {
    let { q } = this.modelFor('search');
    return { q };
  }

  resetController(controller, isExiting, transition) {
    let from = transition?.from?.queryParams?.q;
    let to = transition?.to?.queryParams?.q;
    if (isExiting || (transition && from !== to)) {
      controller.reset();
      controller.set('q', to);
    }
  }

  setupController(controller, { q }) {
    controller.set('q', q);
  }
}

routes.search\.js

import Route from '@ember/routing/route';

export default class SearchRoute extends Route {
	queryParams = {
    q: { refreshModel: true, replace: true }
  };

  model({ q }) {
    return { q };
  }

  resetController(controller, isExiting) {
    if (isExiting) {
      controller.reset();
    }
  }

  setupController(controller, { q }) {
    controller.set('q', q);
  }
}

templates.application\.hbs

<LinkTo @route="search">Search</LinkTo>

<p>
{{outlet}}
</p>

templates.search.modules\.hbs

{{this.query}}

templates.search\.hbs

<input type="text" value={{this.q}} {{on "change" this.handleFilterByKeyword}} />

<ul>
	<li><LinkTo @route="search.modules">Modules</LinkTo></li>
	<li><LinkTo @route="search.providers">Providers</LinkTo></li>
</ul>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}