app-router
app-router copied to clipboard
Global route location url builder
Would be really nice to have some global methods to build urls programatically using PolymerExpressions.prototype.routeURL('name|path', 'params')
(for example). Using document.querySelector('app-router').go('/home');
is not always possible, (unless you import app-router
on every page), and it does not allow you to pass route parameters into it.
Would the bindRouter
attribute help in your case https://erikringsmuth.github.io/app-router/#/databinding/#bindrouter-attribute? It'd be tricky making a global method since it currently relies on the instance of the router to tell if it needs to build a hash URL or regular URL.
Hm, looks promising, does it work with page import?
<app-route [name="demo"]? path="/demo/:pathArg1" import="/pages/demo-page.html" bindRouter ></app-route>
. Asking just for information purposes, not a big deal to use element
instead of import
if it doesn't.
Following bindRouter
principle to access app-router
methods, can we add the url builder feature? ex. path="/view/:category/:book_id"
method: this.router.url('name', {"category": "books", "book_id": 12345})
, return: /view/books/12345
.
Also would be nice to refer routes by name
instead of path
ex. this.router.go('demo')
. In case if route path
changes so we won't have to update it all over the place.
Thank you for the answer. Would love to contribute myself but working extra-full time on a project.
Yep, you can combine it with an imported page.
<app-route path="/customer/:customerId" import="/pages/customer-page.html" element="customer-page" bindRouter></app-route>
I've left out named routes on purpose. I know a lot of routers have them but I see it as redundant features since a URL is inherently unique. Paths don't change that often in the real world and a find/replace on a URL is the same amount of work as on a named route.
The URL builder requires named routes and I don't think it buys too much since it'd just concatenate a few strings.
The other tricky part of a URL builder is when the path has wildcards like /customer/*/order/:orderId
.
Yeah, it's true. Will use it as is for now, if needed, will add some helpers just to fit my case.
Maybe off topic, but don't want to open a new issue for this, you can move it if you think it's needed, I've played all day with the core-list
and could not get it to work inside the layout you have used for your demo page. I have no idea why but it's not rendered on the screen. Have you tried using it? I know core-list
lies strictly on some parent height
rules when <app-router>
and the following <home-page>
page elements have 0 height
. Could you give it a try and maybe post an example of it in demo?
Thank you.