mig-view-router
Version:
URL based router and view web components based on lit-element
64 lines (44 loc) • 3.13 kB
Markdown
This package is a simplified pushState router with support for URL parameters and nesting.
Since view-router was taken, you may pull this package with:
$ npm install --save mig-view-router
Below is an example, basically you have two types of tags/web components, the view-router and inside that element, web components that uses the mixin ViewBehavior e.g. ViewBehavior(LitElement). See example/ for more details.
<!doctype html>
<html>
<head>
<title>Loading... - View router example</title>
<base href="/">
<script>
if (!window.customElements) {
document.write('<script src="polyfills/webcomponents/webcomponents-loader.js"><\/script>');
}
</script>
</head>
<body>
<view-router update-document-title="true">
<view-posts pattern="/"></view-posts>
<view-about pattern="/about/*"></view-about>
<view-post pattern="/:postId"></view-post>
<view-not-found></view-not-found>
</view-router>
<noscript>This service requires JavaScript to function. Please make sure that JavaScript is enabled.</noscript>
</body>
</html>
$ cd example/
$ npm install
$ npm start
A web component with the ViewBehavior mixin will have a *pattern* attribute that matches against the URL and determins when the component should be shown. The attribute accepts three kinds of patterns.
* /my/path - A static path, the view will show when the URL matches
* /posts/:postId - Will match if the views load function resolves
* /posts/* - Will match if the URL starts with /posts, useful when you want to add sub views
For the views with parameters (e.g. /posts/:postId) the views .load() method will be called, you may implement this method any way you want as long as it returns a Promise. Any parameters in the URL that is also declared in the properties for that view will be automatically populated so that you can use them for XHR requests or similar when figuring out whether to resolve/reject a view.
To have a fallback view, add a web component with the ViewBehavior mixin but without any pattern attribute, that one will then be shown if there are no matches in any of the other views.
If you want to deploy your app in a sub path, just add a <base href="/my/base/path"> to your index.html head tag.
### Nested routing
In some cases there is a need to place a view-router inside a view-behaviour component that already is within a parent view-router. In those cases you need to add a *base* property to the child view-router (see *example/src/view-about.js*), all *pattern* properties within that view-router will use that base URL as a prefix when matched against the browser URL.
This is needed to correctly set update the document title and displaying the fallback views in the right situation.
## License
This software is provided as is under the MIT License. It might break at any moment or might perfectly for you, feel free to send pull requests if you figure out any improvements.