# Aurelia 2 - route-href

**URL:** <https://discourse.aurelia.io/t/aurelia-2-route-href/4964>\
**Category:** vNext\
**Created:** [November 3, 2022, 5:38pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964 "2022-11-03T17:38:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![roemhildtg](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roemhildtg/32/1910_2.png) [@roemhildtg](https://discourse.aurelia.io/u/roemhildtg)\
**Post date:** [November 3, 2022, 5:38pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964/1 "2022-11-03T17:38:28Z")

</div>

Is there a similar function to using `route-href` in aurelia 2?

My use case is I like how aurelia 1 where you can generate route urls based on the name of the route - it lets you easily name your routes and re-configure the actual url as needed.

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [November 4, 2022, 1:11pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964/2 "2022-11-04T13:11:45Z")

</div>

The attribute you are looking for is [load](https://docs.aurelia.io/developer-guides/routing/navigating#html-load-attribute)

in Aurelia V1:

```auto
<a route-href="route: profile; params.bind: { name: 'rob' }">View Profile</a>

```

with a router config something like:

```auto
{ 
    route: 'profile/:name', 
    name: 'profile',  
    moduleId: 'viewProfile', 
    title: 'View Profile' 
}

```

in Aurelia V2 it would look like this:

```auto
<a load="route:profile; params.bind:{name: 'rob'}">View Profile</a>

```

with a router config something like

```auto
{
    id: 'profile',
    path: 'profile/:name',
    component: () => import('./view-profile'),
    title: 'View Profile'
},

```

---

<div class="post-metadata">

**Author:** ![roemhildtg](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roemhildtg/32/1910_2.png) [@roemhildtg](https://discourse.aurelia.io/u/roemhildtg)\
**Post date:** [November 4, 2022, 6:31pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964/3 "2022-11-04T18:31:34Z")

</div>

Sooo, I’m struggling to get this working. I’ve got this configured in my main app component:

```auto
import { IRouteableComponent, routes } from "@aurelia/router";

@routes([
  // { path: ['', 'home'], title: 'Home', component: () => import('./routes/home')},
  { id: 'login', path: ['login'], title: 'Login', component: () => import('./routes/login')},
  { id: 'create', path: ['', 'create'], title: 'Create Webmap', component: () => import('./routes/create')},
])
export class MyApp implements IRouteableComponent {
  public message = 'Hello World!';
}

```

and this is how i’m creating a link:

```nohighlight
<a class="btn" load="route:login;">Login</a>
<a class="btn" load="create">Create Webmap</a>

<hr />

<au-viewport class="container"></au-viewport>

```

but the error in the console is

```auto
Uncaught Error: AUR0707: Bindable route not found on load.

```

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [November 4, 2022, 8:45pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964/4 "2022-11-04T20:45:48Z")

</div>

I put together a quick github repo with a small example [https://github.com/lancelot316/aurelia-routing-example](https://github.com/lancelot316/aurelia-routing-example)

From what I experienced if an Id exists in the route configuration it can be used in the `load` attribute without needing to use the `route:` syntax.

my routes look like this

```auto
import { routes } from "@aurelia/router";

@routes([
  { id: 'log', path: ['login'], title: 'Login', component: () => import('./routes/login')},
  { id: 'creator', path: ['','create'], title: 'Create Webmap', component: () => import('./routes/create')}
// // { path: ['', 'home'], title: 'Home', component: () => import('./routes/home')},
])
export class MyApp {
  public message = 'Routing Example';
}

```

and my-app.html looks like this

```auto
<h1 class="message">${message}</h1>

<nav>
  <a load="log">Login</a>
  <a load="creator">Create Webmap</a>
</nav>
<hr />
<au-viewport class="container"></au-viewport>

```

I am not getting the AUR0707 error and the routing is working for me.

---

<div class="post-metadata">

**Author:** ![roemhildtg](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roemhildtg/32/1910_2.png) [@roemhildtg](https://discourse.aurelia.io/u/roemhildtg)\
**Post date:** [November 4, 2022, 8:50pm UTC](https://discourse.aurelia.io/t/aurelia-2-route-href/4964/5 "2022-11-04T20:50:52Z")

</div>

hmm - i think the issue is related to something else. One of my components had a `Router` injected into the component so I could use `this.router.load` programatically. This appears to cause issues with routing in the system.