Having spent over 4 hours trying to get this to work, I though I might ask the community.
Using the latest alpha (v.26), I’m trying to get this URL to work: /package/Foo.Bar where Foo.Bar is a named argument (signature).
My initial attempt involved a route setup in my-app.ts in the shape of: { path: ["package/:signature"], component: import("./routes/package-page/package-page") }
This works but fails when there is a period in the signature, as this may be a limitation with push state (unsure) and it causes issues with the webpack dev server, I tried to enable useUrlFragmentHash so that at least this url would work:
/#package/Foo.Bar
I could not get this to work in any way, toggling useUrlFrameworkHash caused all my load attributes to stop working (I can provide details if there is a need).
Next, I tried using a good old query string: /package?signature=Foo.Bar
By registering my route simply as ‘package’ I was able to hit the load lifecycle hook however signature was no-where to be found as a parsed argument (I was expecting for Aurelia to provide me signature as an entry in the params dictionary).
One more attempt: /package(signature=test)
This again triggers the load lifecycle hook however the params dictionary was empty again.
The new router sounds really great on paper but I’ve had (and am still having) a hard time understanding how to properly use it. The docs are somewhat helpful but a lack of samples is really hurting. I’m happy to help on the docs once I’m comfortable with the new Router. Meanwhile, can anyone shed some light on the above? Thanks!
First thing first, you are right, a period (.) won’t work because it is reserved for internal usage in the router. However, we might want to raise a useful error for that. @bigopon What do you think about that?
Having said that, the following works for me. Note the usage of id, which is later used in the load#route.
diff --git a/src/my-app.html b/src/my-app.html
index 369463f..7b0ac6d 100644
--- a/src/my-app.html
+++ b/src/my-app.html
@@ -1,33 +1,13 @@
-<import from="./welcome-page"></import>
-<import from="./about-page.html"></import>
-<import from="./missing-page"></import>
-
<h1>Overview</h1>
<h1>Links defined in my-app.html</h1>
<ul>
<li>
- <a load="route: about-page; params.bind: { id: 'foo.bar'}">load="route: about-page; params.bind: { id: 'foo.bar'}"</a>
- </li>
-
- <li>
- <a load="route: about-page2; params.bind: { id: 'foo.bar'}">load="route: about-page2; params.bind: { id: 'foo.bar'}"</a>
- </li>
-
- <li>
- <a load="about-page2?id=foo.bar">load="about-page2?id=foo.bar"</a>
- </li>
-
- <li>
- <a href="about-page2?id=foo.bar">href="about-page2?id=foo.bar"</a>
- </li>
-
- <li>
- <a load="about-page/foo.bar">load="about-page/foo.bar"</a>
+ <a load="route: about-page; params.bind: { id: 'foobar'}">load="route: about; params.bind: { id: 'foobar'}"</a>
</li>
<li>
- <a href="about-page/foo.bar">href="about-page/foo.bar"</a>
+ <a href="about-page/foobar">href="about-page/foobar"</a>
</li>
</ul>
diff --git a/src/my-app.ts b/src/my-app.ts
index f94685c..529214a 100644
--- a/src/my-app.ts
+++ b/src/my-app.ts
@@ -8,12 +8,9 @@ export class MyApp {
component: import("./welcome-page")
},
{
+ id: "about-page", // <-- this id is important because this is what is referred in the load#route
path: "about-page/:id",
component: import("./about-page")
- },
- {
- path: "about-page2",
- component: import("./about-page")
}
]
}
From a user perspective, I would indeed expect either an error here- or preferrable, for aurelia to somehow escape my period characters so that I don’t have to worry about what characters are legal in a route. This is particularly relevant for the following syntax: load="route: about-page; params.bind: { id: 'foo.bar'}"
as I’m under the impression that aurelia will take care of formatting a valid URL based on the arguments that I gave this directive (plus I’m pretty sure this used to work in AU1 but I may need to double check that…)
I’m still looking for a way to forward a simple argument to a route (that argument happens to contain a period). Currently, I’m using href with a query string argument applied and I’m manually parsing the query string in my component, I should not have to do that.
In addition, there seems to be no way of creating a route with optional parameters, I would have expected the following to work: load="route: about-page; params.bind: { foo: 'bar' }"
such that in about-page.ts, I can express:
load(params) {
alert(params.foo); // I would have expected foo to be available. Instead its undefined.
}
This used to be a feature in AU1.
I didn’t get that from the docs, will revisit and possibly issue a PR or otherwise open up an issue.
Note that if you’re using a configured route to import a component, such as component: import("./about-page"), you normally shouldn’t have an <import> element for the same component in the html file since that will bypass the benefits of import().
If you want to try the aurelia-direct-router, simply do
npm i aurelia-direct-router
and change your main.ts so that RouterConfiguration is imported from aurelia-direct-router instead of aurelia.
