ember路由和模板不工作

Question

我已经在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>

auth.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');
}

然后是路由器演示demo.hbs

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

demo.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' },
];
}
}

所以当我点击登录按钮时，我需要查看从路由返回的内容，但没有查看新页面，只有登录页面，但url更改为http://localhost:8035/foodapp/#/demo，但页面没有更改

router.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' });
// });
});

有没有人可以帮助我如何查看与路由相关的模板…如何通过过渡到路由从登录页面进入新页面…

environment.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;
};

Answer 1

如果<Auth></Auth>是您的整个application.hbs，这解释了您的问题!

重要的是要理解，application.hbs的内容是总是可见的。它就像顶级路线。所以它需要一个{{outlet}}，它将是任何子路由的占位符，就像您的示例中的demo一样。所以你需要添加这个

resetNamespace: true在顶级路由中也没有任何意义，你应该删除它。

重要的是你的router.js创建了3个路由:

• 应用程序
  • 演示

如果这没有帮助，您可以验证您的浏览器控制台没有任何错误，并指定您列出的所有文件的完整路径，因为可能其中一个路径是错误的。