如何处理Ember.js中的"无路由匹配"并显示404页面？

Question

我该如何处理错误

Uncaught Error: No route matched the URL '...'

并显示自定义404页面？

---

注意:这个问题之前曾被问到并在几个月前得到了回答 - 但不再适用了.

Answer 1

App.Router.map(function() {
  //set up all of your known routes, and then...
  this.route("fourOhFour", { path: "*path"});
});

..您已经定义了FourOhFourRoute,以显示您选择的"找不到路线"消息.您将能够访问fourOhFour路径中最初请求的路径作为路径参数.

编辑:为了清楚起见 - 这个答案是在其他人报告不再工作之后发生的.

编辑2:我已经更新了答案,以反映耶胡达卡茨的评论(如果我错了,请LMK).

Answer 2

这是一个例子:

我使用通配符路由定义路由器中的最后一条路由,请参阅:http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

我有一个/not-found路由,看到我的路由器中定义的最后路由/*path捕获任何文本字符串,请参阅:https://github.com/pixelhandler/blog/blob/master/client/app/router.js#L19

Router.map(function () {
  this.route('about');
  this.resource('posts', function () {
    this.resource('post', { path: ':post_slug' });
  });
  this.resource('admin', function () {
    this.route('create');
    this.route('edit', { path: ':edit_id' });
  });
  this.route('not-found', { path: '/*path' });
});

该路由重定向/not-found,请参阅:https://github.com/pixelhandler/blog/blob/master/client/app/routes/not-found.js

import Ember from 'ember';
export default Ember.Route.extend({
  redirect: function () {
    var url = this.router.location.formatURL('/not-found');
    if (window.location.pathname !== url) {
      this.transitionTo('/not-found');
    }
  }
});

还具有钩的任何途径(例如model,beforeModel,afterModel),其导致被拒绝的承诺,可以使用error动作转换到404.

actions: {
  error: function (error) {
    Ember.Logger.error(error);
    this.transitionTo('/not-found');
  }
}

哪个呈现not-found模板,请参阅:https://github.com/pixelhandler/blog/blob/master/client/app/templates/not-found.hbs

<h1>404 Not Found</h1>
<p>
  Perhaps you have a link that has changed, see {{#link-to 'posts'}}Archives{{/link-to}}.
</p>

这是我的404页面:http://pixelhandler.com/not-found

Answer 3

您可以尝试在路由器末尾添加catch-all路由:

App.Router.map(function() {
  this.resource('post', ...);
  this.resource('user', ...);
  this.route('catchAll', { path: '/*' });
});

App.CatchAllRoute = ...