# V2 router hash routing question

**URL:** <https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743>\
**Category:** vNext\
**Created:** [April 26, 2022, 11:42am UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743 "2022-04-26T11:42:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 26, 2022, 11:42am UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/1 "2022-04-26T11:42:28Z")

</div>

Using the following router configuration:

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

```

and the following routes:

```auto
@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?

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 26, 2022, 2:58pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/2 "2022-04-26T14:58:50Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 26, 2022, 6:58pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/3 "2022-04-26T18:58:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 26, 2022, 7:18pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/4 "2022-04-26T19:18:52Z")

</div>

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

```nohighlight
import { routes } from `@aurelia/router`;

```

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 26, 2022, 7:28pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/5 "2022-04-26T19:28:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 26, 2022, 7:37pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/6 "2022-04-26T19:37:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 27, 2022, 5:41am UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/7 "2022-04-27T05:41:01Z")

</div>

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

```auto
import { RouterConfiguration } from '@aurelia/router'

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

```

Looking at the [source](https://github.com/aurelia/aurelia/blob/9bbc6924223b1a596862f08ecd392e7f16ebd3dc/packages/router/src/router-options.ts#L29) it seems to be hardcoded?

* * *

* * *

One of my components defines a couple of child routes:

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

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 27, 2022, 3:10pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/8 "2022-04-27T15:10:12Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [April 27, 2022, 6:28pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/9 "2022-04-27T18:28:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 27, 2022, 9:25pm UTC](https://discourse.aurelia.io/t/v2-router-hash-routing-question/4743/10 "2022-04-27T21:25:22Z")

</div>

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