Web Component based router.
<page-link path="/">Home</page-link>
<page-link path="/contact">Contact</page-link>
<with-route path="/">
Home content
</with-route>
<with-route path="/contact">
Contact content
</with-route>npm install @beforesemicolon/router
In the browser
<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/router@0.1.0/dist/client.js"></script>
<!-- link you app script after -->
<script>
const { ... } = BFS.ROUTER
</script>A link that lets you navigate to any page. Works similar to goToPage and takes the same options. The path can contain search query
<page-link
path="/"
title="Welcome"
data='{"sample": "value"}'
>
Home
</page-link>
<page-link path="/router/index.html?tab=sample">sample tab</page-link>A component to conditionally render content based on the route.
The content can be provided as children content or loaded via the src attribute.
You can also set content inside with attribute of loading to show while
the content is being loaded or a fallback in case the content fails to load.
<!-- static inner content -->
<with-route path="/">
Home content
</with-route>
<!-- fetch html content -->
<with-route path="/contact" src="/contact.html">
<div slot="loading">Loading home content</div>
<div slot="fallback">
Fallback contact page content
</div>
</with-route>
<!-- lazy load a component/code and pass data -->
<with-route path="/greeting" src="./greeting.page.js" data='{"greeting":"Hello World"}'></with-route>// greeting.page.js
const { html } = BFS.MARKUP
export default ({ greeting }) => {
return html`<p>${greeting}</p>`
}The with-route-query work just like with-route but reacts to the search query of the url. It takes a key and value
prop to react to instead of a path.
<with-route-query key="tab" value="sample">
sample tab content
</with-route-query>Takes you to a new page pathname. It takes the path name, an optional data and a page title.
goToPage('/sample')
goToPage('/test', {sample: "value"}, 'test page')Replaces the current page pathname. It takes the path name, an optional data and a page title.
replacePage('/new', {data: 3000}, 'new page')A listener for page changes. Takes a callback function that its called with the path name, a search query object literal, and any data set for the page.
onPageChange((pathName, searchQuery, data) => {
...
})Takes you to the next page.
nextPage()Takes you to the previous page.
previousPage()Returns a object literal representation of the search query.
getSearchQuery()Takes a object literal and updates the search query.
updateSearchQuery({
date: "2020-01-01",
sample: 30
})Returns the data set for the page.
getPageData();