Link-to links to '#' instead of specified resource

I have a component that links to a page containing custom groups of users.

(student-group-item.hbs)

  <a href="#"  class="item-link">
    <h4 class="title"></h4>
    <ul class="meta ">
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
    </ul>
  </a>

Now when I left click on any of the list items, it properly links me to the group of students. However when I middle click or do something to open this up in a new tab I am instead redirected to a page ending with the anchor tag

so instead of getting linked to

localhost:4200/student-group/1111

I am linked to localhost:4200/#

I tried to change it to something along the lines of

    
       
         <h4 class="title"></h4>
         <ul class="meta ">
         <li class=""></li>
         <li class=""></li>
         <li class=""></li>
         <li class=""></li>
         <li class=""></li>
         <li class=""></li>
         </ul>
      
  

But still have the same problem despite removing the anchor tag.

I have the route properly laid out in the router.js

this.route('student-group', {path: 'student-group/:group_id'});

So I am a bit stuck on what to do and how to approach this.