更正无效的路由命名答案

【问题标题】：Correcting Invalid Route Naming更正无效的路由命名
【发布时间】：2019-04-22 00:12:09
【问题描述】：

我目前正在开发一个CRUD 应用程序——到目前为止，我已经创建了一个index 路由、一个show 路由和create 路由，并继续创建一个update 方法。我已经继续添加了路由、模板和控制器，但是每当我尝试单击指向新模板的链接时，我都会收到一条错误消息，让我知道以下内容：

This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.

我通过显示页面链接到更新路径，并且可以确认我传递给link-to 函数的ID 存在。在这种情况下，我认为我的路线名称可能有问题，但无法弄清楚我哪里出错了。我认为嵌套路由可能有问题。

我尝试更改路由的顺序，并将控制台日志语句放入控制器中，一旦链接到语句被命中，我预计会命中 - 到目前为止，我还没有进入控制器。

app/router.js

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

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

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('posts', function() {
    this.route('post');
    this.route('show', { path: '/:post_id' });
    this.route('edit', { path: '/:post_id/edit' });
    this.route('destroy', {path: ':post_id/destroy'});
  });
});

export default Router;

apps/routes/posts/edit.js

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

export default Route.extend({
  model(params) {
    console.log('hit this when edit route is hit')
    return this.store.findRecord('post', params.post_id);
  }
});

app/templates/post/show.hbs

<div class="jumbo show-posts">
 ...
</div>
{{log this.model.id}}
  <div class="col-sm-offset-2 col-sm-10">
    <h3>{{#link-to "post.edit" post class=this.model.id}}Update post{{/link-to}}</h3>
  </div>
{{outlet}}
...

【问题讨论】：

标签： javascript ember.js routing ember-cli

【解决方案1】：

您提到了错误的路线名称。根据您的router.js，它应该是posts.edit。您应该将至少一个参数传递给post.edit 路由。

看看我的工作ember-twiddle

由于您提到了this.route('edit', { path: '/:post_id/edit' })，因此该路由预计至少有一个参数:post_id 存在。

修改你{{link-to}}如下，

{{#link-to "posts.edit" this.model.id}}Update post{{/link-to}}

您可以通过params.post_id访问控制器中的帖子ID，

model(params) {
  console.log('hit this when edit route is hit')
  return this.store.findRecord('post', params.post_id);
}

【讨论】：