Creating new route on button click; pass button data and same model

Design
1

I have an existing route (route1) which works fine and need to create another route (route2), which is called when a button (deep inside components) is clicked on route1. Am fairly new to Ember, using 1.13.0 and need to understand how to best implement this.

My server returned JSON has 2 objects A and B ( both, deeply nested, and are almost identical with just different data). Data “A” and its child nodes are shown on route1 and I need to show data “B” and its child nodes on route2 and also need to pass some information about the button which was clicked. I call the ajax on route1, so, basically, i have the complete data for both routes available here only, some of which is obviously in query params.

Route1 has a controller already, so my doubts are:

  1. Would i need to create another controller for this new route or same controller can be used for both
  2. How should i pass the model/JSON from route1 to new one, along with some other data, like which button was clicked and its few properties

app.js

    app.Router.map(function() {
        this.resource('main', { path: '' }, function(){
              this.route('route1', { path: '/main/route1'});
              this.route('route2', { path: '/main/route2'});
        });
    });

route1.js

var route = Ember.Route.extend({
 model: function(){
  var params = this.modelFor('app').params;
  return getData(params).then()  // ajax call here
 },
 setupController: function(controller, model){
  controller.set('model',model)
 }
})

I created this new route2 (not sure if the code is correct) and i could load a new page which was basically loading some html elements, but there was no data

route2.js

var route = Ember.Route.extend({
    setupController: function(controller) {
       var model = {
            params: this.paramsFor('app')
       };
       controller.set('model',model)
    }
});

And there’s one more route at top level, which has the queryParams setting as well.