Friendly (slug) URLs instead of ID

@davidpmccormick wrote:

I'm just getting started with Ember and I'm trying to set up friendly URLs for an example recipes app (with Firebase/emberfire).

I'm hoping to be able to get URLs that look something like /recipes/beans-on-toast. So far, everything's working if I arrive at the URL from a {{#link-to}}, but if I visit the URL directly, it won't work.

Various sources have suggested the serialize() hook as being something that needs to be configured, but hasn't appeared to help.

Have I overlooked something basic?

Here's my setup:

// models/recipe.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  slug: DS.attr('string'),
  description: DS.attr('string'),
});

// routes/recipe.js
import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.find('recipe', params.slug);
  },

  // Not sure if this is necessary
  serialize(model) {
    return {
      slug: model.get('slug')
    };
  }
});


// router.js
import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('recipes');
  this.route('recipe', {path: '/recipes/:slug'});
});

export default Router;

Posts: 8

Participants: 3

Read full topic