polymer-ui-router - Vaadin Add-on Directory
UI-router wrapper for Web Components
# \
## UI Router Web Component wrapper (using minimal bits from Polymer 3.x base element)
Use https://ui-router.github.io/core/docs/latest/ and https://ui-router.github.io/
For general UI-Router documentation.
**Demo page: https://www.webcomponents.org/element/ergo/polymer-ui-router**
UI-Router is one of most popular routing solutions,
with ports for angular 1.x, 2.x+ and react - now also available for Web Components.
UI-Router provides state based routing. Each feature of an application is defined as a state. One state is active at any time, and UI-Router manages the transitions between the states.
Each state describes the URL, the UI (a view or views), data prerequisites, and other logical prerequisites (such as authentication) for a feature. Before activating a state, UI-Router first fetches any prerequisites (asynchronously), and then activates the view(s) and updates the URL.
UI-Router states are hierarchical; states can be nested inside other states, forming a tree.
Child states may inherit data and behavior (such as authentication) from their parent states.
Some features of UI Router:
* Hierarchical states both abstract and components based
* States can be resolve *(including async)* and activate based on set prerequisites
* Multiple views per state
* Views can be nested inside other views
* Transition and lifecycle API's
## Example usage
let routerStates = [
{name: "index_route", url: "/index", component: "index-comp"},
{name: "foo", url: "/foo", component: "foo-comp"},
{name: "arg", url: "/arg/:argumentId?:test", component: "arguments-comp"},
{name: "user", url: "/bar", component: "bar-comp"},
{name: "state_a", parent: 'bar.baz', url: "/a", component: "baz-a-comp"},
{name: "state_b", parent: 'bar.baz', url: "/b", component: "baz-b-comp"}
]
// top-level
// view level, generates A tags
Foo (this restomps every click)
With arguments directly
// this injects new views based on router state, /index path will
// result in being stomped
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed.
Install bower and npm dependencies (quick way is `yarn bower`).
Then run `yarn serve` to serve your application locally.
## TIPS
Set a `` tag in your index.html to let the router know the static/base part of your URL
View on GitHub
Online Demo
Documentation
GitHub Homepage
Issue tracker
polymer-ui-router version 0.1.0
### Dependencies
* polymer#Polymer/polymer#^1.7.0
polymer-ui-router version 0.1.1
### Dependencies
* polymer#Polymer/polymer#^1.7.0
polymer-ui-router version 0.1.2
### Dependencies
* polymer#Polymer/polymer#^1.7.0
polymer-ui-router version 0.1.3
### Dependencies
* polymer#Polymer/polymer#^1.7.0
polymer-ui-router version 0.1.4
### Dependencies
* polymer#Polymer/polymer#^1.7.0
polymer-ui-router version 0.1.5
### Dependencies
* polymer#Polymer/polymer#1.7 - 2
polymer-ui-router version 0.1.6
### Dependencies
* polymer#Polymer/polymer#1.7 - 2
polymer-ui-router version 0.1.7
### Dependencies
* polymer#Polymer/polymer#1.7 - 2
polymer-ui-router version 0.1.8
### Dependencies
* polymer#Polymer/polymer#1.7 - 2
polymer-ui-router version 0.1.9
### Dependencies
* polymer#Polymer/polymer#1.7 - 2
polymer-ui-router version 0.2.0
### Dependencies
* polymer#Polymer/polymer#2 - 3
polymer-ui-router version 0.2.1
### Dependencies
* polymer#Polymer/polymer#2 - 3
polymer-ui-router version 1.0.0
### Dependencies
* polymer#Polymer/polymer#2
polymer-ui-router version 1.0.1
### Dependencies
* polymer#Polymer/polymer#2
polymer-ui-router version 3.0.0
### Dependencies
* @uirouter/core#^5.0.19
* @polymer/polymer#^3.0.0
polymer-ui-router version 3.0.1
### Dependencies
* @uirouter/core#^5.0.19
* @polymer/polymer#^3.0.0
polymer-ui-router version 3.0.2
### Dependencies
* @polymer/polymer#^3.0.0
* @uirouter/core#^5.0.21
* npm#^6.4.1
polymer-ui-router version 3.0.3
### Dependencies
* @uirouter/core#^5.0.21
* @polymer/polymer#^3.0.0