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.