I am having an issue with configuring Aurelia route when the path like layer1/layer2 not just layer1. Here is the project file structure (files under dist gets created automatically based on files under src folder)
dist
| - home
| - home.html
| - home.js
| - user
| - register.html
| - register.js
app.html
app.js
main.js
src
| - home
| - home.html
| - home.js
| - user
| - register.html
| - register.js
app.html
app.js
main.js
When I do the following it just works fine:
app.html
<template>
<div>
<a href="user">register user</a>
<a href="otherlink">otherlink</a>
</div>
<div class='main'>
<router-view></router-view>
</div>
</template>
app.js
this.router.configure(config => {
config.title = 'demo';
config.options.pushState = true;
config.map([
// home routes
{ route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },
// User register
{ route: ['user'], moduleId: './user/register', nav: true, title:'Register User'}
]);
});
But when I change the path from user to user/register like below, it no longer works
app.html
<template>
<div>
<a href="user/register">register user</a>
<a href="otherlink">otherlink</a>
</div>
<div class='main'>
<router-view></router-view>
</div>
</template>
app.js
this.router.configure(config => {
config.title = 'demo';
config.options.pushState = true;
config.map([
// home routes
{ route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },
// User register
{ route: ['user/register'], moduleId: './user/register', nav: true, title:'Register User'}
]);
});
And in chrome debugger, I see this error:
GET http://localhost:9000/user/dist/user/register.html 404 (Not Found)
Notice that somehow an extra user gets added to the url which causes not to be able find register.html file. Again, when I am just using user as route, it works fine without any error but when I just change from user to user/register, it doesn't work anymore.
Could someone please let me know why this is happening and how to fix it?