Aurelia 2 - route-href

vNext
1

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.

2

The attribute you are looking for is load

in Aurelia V1:

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

with a router config something like:

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

in Aurelia V2 it would look like this:

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

with a router config something like

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

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

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:

<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

Uncaught Error: AUR0707: Bindable route not found on load.
4

I put together a quick github repo with a small 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

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

<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.

5

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.