我在application.hbs中包含了一个组件

<Auth></Auth>

接下来，在auh组件中，我有以下代码auth.hbs

<form>
    <div class="text-field">
         <label>UserName:</label>
        <Input type="text" id="username" required />
        <span></span>

    </div>
    <div class="text-field">
        <label>Password:</label>
        <Input type="password" id="password" required />
        <span></span>

    </div>
    <div id="result"></div>
    <input {{action "buttonClick"}} type="submit" value="Login">
</form>

授权.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class AuthComponent extends Component {
  @service router;
   @service('index') auth;

  @action
  buttonClick() {
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    console.log('user is ' + username);
    var dummy = this;
    dummy.router.replaceWith('demo');
    this.get('router.router').transitionTo('demo');
}

然后是路由器演示。hbs

{{#each @model as |post|}}
  <div>
    {{post.title}}
  </div>
{{/each}}

演示.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class DemoRoute extends Route {
  @service router;
  async model() {
    return [
      { title: 'Ember Roadmap' },
      { title: 'Accessibility in Ember' },
      { title: 'EmberConf Recap' },
    ];
  }
}

因此，当我单击登录按钮时，我需要查看从route返回的内容，但没有查看新页面，只有登录页面在那里，但url更改为http://localhost:8035/foodapp/#/demo但页面没有更改
路由器.js

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

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  // this.route('request', { path: '/req' });
  this.route('demo', { path: '/demo',resetNamespace: true });

  // this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
  // this.route('fo', function() {
  //   this.route('index', { path: '/' }); // this is implicit, just putting it in for clarity
  //   this.route('post', { path: '/:id' });
  // });

});

任何人都可以帮助我如何查看与路由相关的模板。如何通过转换到路由从登录页面转到新页面。。
环境.js

'use strict';

module.exports = function (environment) {
  let ENV = {
    modulePrefix: 'foods',
    environment,
    rootURL: '/',
    locationType: 'hash',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false,
      },
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
  };

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
    ENV.APP.autoboot = false;
  }

  if (environment === 'production') {
    // here you can enable a production-specific feature
  }

  return ENV;
};