Mixin & Component Demo

components.re-use.js

import Ember from 'ember';

export default Ember.Component.extend({
  variable: 'Component Variable',
  resusableMethod() {
    console.log('do something')
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

mixins.re-use.js

import Ember from 'ember';

export default Ember.Mixin.create({
  model() {
    return Ember.Object.create({title: 'Awesome'})
  }
});

router.js

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

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function () {
  this.route('routea', function () {
    this.route('routex')
  })
  this.route('routeb', function () {
    this.route('routex')
  })
})

export default Router;

routes.routea.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.routea.routex.js

import Ember from 'ember';

import ReUseMixin from '../../mixins/re-use'
export default Ember.Route.extend(ReUseMixin,{
});

routes.routeb.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.routeb.routex.js

import Ember from 'ember';

import ReUseMixin from '../../mixins/re-use'

export default Ember.Route.extend(ReUseMixin,{
});

templates.application.hbs

{{link-to 'route A' 'routea'}} | {{link-to 'route B' 'routeb'}}
<br>
{{link-to 'route A/X' 'routea.routex'}} | {{link-to 'route B/X' 'routeb.routex'}}
<br>
=============================
<br>
{{outlet}}

templates.components.re-use.hbs

Here goes your template code you want to re-use
Variable Demo: {{variable}}

templates.routea.hbs

Route A
<br>
{{link-to 'Go To Child' 'routea.routex'}}
<br>
=============================
<br>
{{outlet}}

templates.routea.routex.hbs

Route A.X

{{!-- variables/methods in mixin--}}
<br>--{{model.title}}--<br>
{{!-- variables/methods in mixin--}}

{{!-- variables/methods in component--}}
<br>**{{re-use}}**
{{!-- variables/methods in component--}}

templates.routeb.hbs

Route B
<br>
{{link-to 'Go To Child' 'routea.routex'}}
<br>
=============================
<br>
{{outlet}}

templates.routeb.routex.hbs

Route B.X

{{!-- variables/methods in mixin--}}
<br>--{{model.title}}--<br>
{{!-- variables/methods in mixin--}}

{{!-- variables/methods in component--}}
<br>**{{re-use}}**
{{!-- variables/methods in component--}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}