ember model -making a table of items click for detail

I am just learning emberjs and have been given a barebones task.

I have a table of users displayed from my model. To the side of the table, I have an area where it will display details of a selected user. Thus:

ID FNAME LNAME         | DETAIL: User 2
1  Andy  Ashford       | First: Betty
2  Betty Beckett       | Last: Beckett
                       | Phone: 222-222-2222

I've got the LEFT side working, but not the RIGHT side.

(I'm using Mirage to load data. I could not seem to get http-mocks to work).

Two questions:

1. Should I

   • route this directly within script or
   • should I use the path? i.e. When just the users table is displayed, my path is /users/, but when I click on user 1, I could set the path to /user/1, then do all my logic from there.

2. With either method, how do I deliver the specific user data to the user-detail component? How do I point the model at the view?

Here is my Mirage/config.js (don't know why Mirage keeps data in a config file, but...)

this.get('/users', function() {
    return {
        data: [{
            type: 'users',
            id: 1,
            attributes: {
                fname: 'Andy',
                lname: 'Ashford',
                phone: '111-111-1111',
            }
        }, {
            type: 'users',
            id: 2,
            attributes: {
                fname: 'Betty',
                lname: 'Beckett',
                phone: '222-222-2222',
            }
        }]
    };
});

My models/user.js just looks like this:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
    fname: attr(),
    lname: attr(),
    phone: attr()
});

My main templates/components/user-list.hbs (this is working - table on left, though detail on right has no data):

<table class="with-detail"><tr>
        <td class="table-overview">
            <table class="user-table">
                
                <tr>
                    <td> </td>
                    <td></td>
                    <td></td>
                </tr>
              
            </table>
        </td>
        <td class="table-detail">
            <!-- Show all data of user X -->
            <!---->

        </td>
    </tr>
</table>

My templates/components/user-detail.hbs (I can see the labels in the detail, so I'm calling the template, but no data):

First name:  //these don't work of course
Last name: 
Phone: 

This is what I've been trying to do with the router.js:

Router.map(function() {
  this.route('users', { 
      path: 'users', 
  });
  this.route('user', { 
      path: 'user/:id' 
  });
});

And for good measure, there are additionally some routes. routes/users.js:

import Ember from 'ember';
export default Ember.Route.extend({
    model() {
        return this.store.findAll('user');
    }
});

routes/user.js:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.query('user', { id: 1 });    
    }
});

(and why so many route files?)

If I hit user/1 directly, I see nothing - no table, no detail (presumably because /users/ and its model have gone away).

I'm sort of stumped.