How to dynamically load route in ember.js?

@cali_green 

To dynamically load routes in Ember.js, you can use the Ember Router map function to create a dynamic route based on a parameter passed in the URL.

Here's a simple example of how to dynamically load a route in Ember.js:

1. Define your dynamic route in the router.js file:

1
2
3

Router.map(function() {
  this.route('dynamic', { path: '/dynamic/:dynamic_param' });
});

1. Create a corresponding template file for the dynamic route (dynamic.hbs):

1
2

<h1>Dynamic Route</h1>
<p>{{model}}</p>

1. Create a corresponding route file for the dynamic route (dynamic.js):

1
2
3
4
5
6
7

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

export default Route.extend({
  model(params) {
    return params.dynamic_param;
  }
});

1. Use the dynamic route in your application by navigating to a URL with the dynamic parameter:

1

this.transitionTo('dynamic', dynamic_param_value);

With this setup, when you navigate to a URL with the dynamic parameter, Ember will load the dynamic route component and pass the parameter value as the model, which can then be used in the template.