ember.js - 如何在 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：我已经更新了答案以反映 Yehuda Katz 的评论（如果我错了，请 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）的路由都可以使用该操作转换到 404。afterModelerror

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

您可以尝试在路由器末尾添加一条包罗万象的路由：

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

App.CatchAllRoute = ...

Answer 4

在 Ember 2.x 中

在App.Router.map函数内部，将代码放在回调函数的末尾下方。

this.route('your_handler_route_name', { path: '/*path' }）；

现在，每条未被先前定义的路线捕获的路线都将被路线捕获your_handler_route_name。

Answer 5

解决方案 1

显示 404 内容：

App.Router.reopen({
        handleURL: function (url) {
            try {
                return this._super(url);
            } catch (error) {
                if (error.message.match(/No route matched the URL/)) {
                    return this._super('/404');
                }
            }
        }
    });

如果您还想将 URL 更改为 404：

App.Router.reopen({
        location: locationImplementation,
        handleURL: function (url) {
            try {
                return this._super(url);
            } catch (error) {
                if (error.message.match(/No route matched the URL/)) {
                    this.transitionTo('404');
                    return this._super('/404');
                }
            }
        }
    });

要了解这里发生的事情，请参见22636ember rc2中的行。

解决方案 2

解析当前 URL 并检查路由或资源是否存在App.Router.router.recognizer.hasRoute('route.path.goes.here');