Comment gérer "aucun itinéraire ne correspond" dans Ember.js et afficher 404 page?

Question

Comment puis-je gérer l'erreur

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

et afficher une page 404 personnalisée?

---

Remarque: cette question a déjà été posée et à laquelle il a été répondu plusieurs mois auparavant - mais ne fonctionne plus.

Answer 1

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

.. où vous avez défini votre FourOhFourRoute pour afficher le message "Aucun itinéraire trouvé" de votre choix. Vous pourrez accéder au chemin demandé à l'origine dans la route fourOhFour en tant que paramètre de chemin.

EDIT: juste pour la clarté - cette réponse est venue après que les autres ont été rapportés pour ne plus fonctionner.

EDIT 2: J'ai mis à jour la réponse pour refléter le commentaire de Yehuda Katz (si je me trompe, s'il vous plaît, LMK).

Answer 2

Voici un exemple:

Je définis la dernière route dans mon routeur à l'aide d'un générique route voir: http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

J'ai un /not-found route, voir la dernière route définie dans mon routeur /*path pour attraper une chaîne de texte, voir: 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' });
});

Cet itinéraire fait une redirection /not-found, voir: 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');
    }
  }
});

Aussi l'itinéraire d'avoir un crochet (par exemple, model, beforeModel, afterModel) qui se traduit par le refus de la promesse, peuvent utiliser l' error d'action pour la transition à la 404.

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

Ce qui rend un not-found modèle, voir: 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>

Voici ma page 404: http://pixelhandler.com/not-found

Answer 3

Vous pouvez essayer d’ajouter un itinéraire polyvalent à la fin de votre routeur:

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

App.CatchAllRoute = ...
 

Answer 4

Solution 1

Pour afficher le contenu 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');
                }
            }
        }
    });
 

Si vous souhaitez modifier l'URL en 404 également:

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

Pour comprendre ce qui s’est passé ici, voyez la ligne 22636 in ember rc2 .

Solution 2

Analyser l'URL actuelle et vérifier si une route ou une ressource existe à l'aide de App.Router.router.recognizer.hasRoute('route.path.goes.here');