Demo: Route Replacement Bug

controllers.application\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

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

  @service locationLogger;
}

controllers.first\.js

import Controller from '@ember/controller';

export default class FirstController extends Controller {
  queryParams = ['foo'];
}

router\.js

import EmberRouter from '@ember/routing/router';
import { getOwner } from '@ember/application';
import { inject as service } from '@ember/service';
import NoneLocation from '@ember/routing/none-location';

import config from './config/environment';

class MyHistory extends NoneLocation {
  implementation = 'none-with-logging';

  @service locationLogger;

  setURL(path) {
    this.locationLogger.setURL(path);
  }

  replaceURL(path) {
    this.locationLogger.replaceURL(path);
  }
}

const Router = EmberRouter.extend({
  init() {
    this._super(...arguments);
    
    const owner = getOwner(this);
    owner.register('location:none-with-logging', MyHistory);
  },
  
  location: 'none-with-logging',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('first', function() {
    this.route('second');
  });
});

export default Router;

routes.first.index\.js

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

export default class FirstIndexRoute extends Route {
  afterModel() {
    // (2) Redirect to a sub-route as part of the initial transition
    this.replaceWith('first.second');
  }
}

routes.first\.js

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

export default class FirstRoute extends Route {
  queryParams = {
    foo: {
      refreshModel: true
    }
  }

  afterModel(_, transition) {
    // (1) When navigating through here, we add a "default" QP to the URL to simulate
    //     dynamically computing the initial value to use
    this.replaceWith({ queryParams: { foo: 'bar' } });
  }
}

services.location-logger\.js

import Service from '@ember/service';

export default class LocationLogger extends Service {
  history = [];

  setURL(path) {
    this.history.push({ method: 'set', path });
    this.notifyPropertyChange('history');
  }

  replaceURL(path) {
    this.history.push({ method: 'replace', path });
    this.notifyPropertyChange('history');
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>

<br>
<br>

<LinkTo @route="index">
  Home
</LinkTo>
<br>
<LinkTo @route="first">
  Transition to <code>first.second</code> through <code>first</code>
</LinkTo>

<br>
<br>

<ul>
  {{#each this.locationLogger.history as |item|}}
    <li>{{item.method}}: {{item.path}}</li>
  {{/each}}
</ul>


{{outlet}}

twiddle\.json

{
  "version": "0.17.0",
  "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.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}