Skip to content

stencil router

Jump to bottom
Josh Thomas edited this page Jun 7, 2018 · 9 revisions

Components

Tutorials

Clone this wiki locally

You should have one single stencil-router component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.

property type description
root string The root path of that the router is responsible for. All routes and links will resolve from this root.
historyType 'browser' OR 'hash' The history type that you would like the router to use. default is browser (html5 pushState)
titleSuffix string A suffix to append to the page title whenever it's updated through RouteTitle

Basic usage

<stencil-router titleSuffix=" - My App">
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="landing-page" exact={true} />
    <stencil-route url="/demos" component="demos-page" />
    <stencil-route url="/other" component="other-page" />
    <stencil-route component="page-not-found" />
  </stencil-route-switch>
</stencil-router>