V2 router hash routing question

vNext
1

Using the following router configuration:

Aurelia
  .register(DialogDefaultConfiguration)
  .register(RouterConfiguration.customize({
    routingMode: 'configured-only',
    sameUrlStrategy: 'reload',
    useUrlFragmentHash: true,
    useHref: false
  }))
  .app(MyApp)
  .start()

and the following routes:

@route({
  routes: [
    { path: '', redirectTo: 'step-01' },
    { id: 'step-01', path: 'step-01', component: import('./resources/routes/step-01'), title: 'Step 01' },
    { id: 'step-02', path: 'step-02', component: import('./resources/routes/step-02'), title: 'Step 02' }
  ]
})

The main url when starting the app on localhost is: http://localhost:9000/#, which is as expected. But then when navigating to a route (e.g. step-02 in the above example) the url changes to http://localhost:9000/#step-02. Should it not be http://localhost:9000/#/step-02? So the current version is missing a / after the #.

In aurelia V1 the additional / was added when using hash routing.

Further, if I want to use the router.load() function to change routes. Then this.router.load('step-02') will not work. The # needs to be added in this.router.load('#/step-02'). Why is this the case?

Are there any plans to fix this?

2

This is how @aurelia/router-lite currently behaves. I don’t know of any plans to change this.

The @aurelia/router behaves the way you expect it.

If you should decide to switch router, note that configuration options are slightly changed in @aurelia/router-lite compared with @aurelia/router. In @aurelia/router, your options would be

  .register(RouterConfiguration.customize({
    useDirectRouting: false,
    useUrlFragmentHash: true,
    useHref: false
  }))

The option sameUrlStrategy is set on the configured routes or as a property in the component and is called reloadBehavior. (A configuration option on the router will be added in an upcoming release.)

In addition, the decorator is called @routes([ your routes here ]).

Let me know if you do decide to switch router and have any issues or questions.

1 Like
3

Awesome, thank you!

Yes I would like to switch router. I can’t seem to find any documentation. Could you maybe share a link or an example?

Where do I import the router configuration from?
import { RouterConfiguration } from '@aurelia/router or import { RouterConfiguration } from 'aurelia, or somewhere else

Where do I import the @routes decorator from?

Thanks

4

The documentation is on its way. In order to switch, install the package with

npm i @aurelia/router

and then, as you guessed, import anything related to the router from @aurelia/router . For example

import { routes } from `@aurelia/router`;
1 Like
5

Ah ok I see. Thank you. Unfortunately, after installing @aurelia/router I get the following error:

Uncaught Error: Conflicting @aurelia/metadata module import detected. Please make sure you have the same version of all Aurelia packages in your dependency tree.

6

Never mind. Just had to delete node_moldues and package lock file and run npm install again.

1 Like
7

@jwx thanks for all of the help so far. I have got two more questions:

I can’t seem to get the string Aurelia out of the title. So page title would always be Component Title | Aurelia. Trying this doesn’t seem to do anything.

import { RouterConfiguration } from '@aurelia/router'

.register(RouterConfiguration.customize({
    useDirectRouting: false,
    useUrlFragmentHash: true,
    useHref: false,
    title: 'Some Title'
 }))

Looking at the source it seems to be hardcoded?

One of my components defines a couple of child routes:

import { IRouter, routes } from '@aurelia/router'

@routes([
  { id: 'child-1', path: 'child-1,  ...},
  { id: 'child-2', path: 'child-1,  ...},
  { id: 'child-3', path: 'child-1,  ...},
])

export class XYZ {
  load() {
    if(a) // load child route 1
    if(b) // load child route 2
    if(c) // load child route 3
  }
}

When I navigate to that component using router.load('xyz') I would like to add in some logic in the components load hook so that depending on some condition, it knows which child route it should load.

How would you do this?

Thanks.

8

Changing the title doesn’t show the change until a new navigation is made (or a new tab is opened). I’m aware of it, but since it, as far as I know, is a minor inconvenience I haven’t fixed it yet (other things have had higher priority). Let me know if you’re unable to change the title at all, even after opening a new tab.

As for your child routes use case, there’s details that I’m missing, but maybe by adding an au-viewport in xyz.html and then have something like:

  load() {
    if(a) this.router.load('child-1', { context: this });
    if(b) this.router.load('child-2', { context: this });
    if(c) this.router.load('child-3', { context: this });
  }

in xyz.ts. Let me know if this doesn’t fit your use case.

9

Awesome everything works as expected. Thank you.

From what I noticed, the following works (just had to open in a new tab).

RouterConfiguration.customize({ title: 'Some title' })

However, it gets rid of the route title. So instead of being Component Title | App Title, it’s only ever set to App Title.

Is there a way to set the app title, but also keep the component title? I am totally happy with the way it is now, just asking more out of curiosity.

10

Sure, you can completely control the title. So set it for example to '${componentTitles}\${appTitleSeparator}Some title'.

1 Like