sham-ui-router


Router for sham-ui

Install

``bash


npm


npm install sham-ui-router
`

`bash


yarn


yarn add sham-ui-router
`

API

#### Table of Contents

- LinkToOptions
- Properties
- LinkTo
- Properties
- ActivePageContainer
- Examples
- ParamsBuilder
- Examples
- param
- Parameters
- \_params
- Parameters
- \_useActiveClass
- \_activeClass
- Parameters
- path
- Parameters
- HrefTo
- Parameters
- Examples
- lazyPage
- Parameters
- Router
- Parameters
- Examples
- bindPage
- Parameters
- bindLazyPage
- Parameters
- navigateToRoute
- Parameters
- resolve
- notFound
- navigate
- Parameters
- hooks
- Parameters
- generate
- Parameters
- Examples
- routerStorage
- RouterStorage
- Properties

$3

Options for LinkTo

Type: Object

#### Properties

- path string Name of page for link. Default ''
- params Object Params of page for link. Default {}
- text string Text for link. Default ''
- useActiveClass boolean Use activeClass options for active page link. Default false
- activeClass string Class name for active link. Default 'active'

$3

Component for link to page

#### Properties

- options LinkToOptions

$3

Component-container for page

#### Examples

`javascript
{% import ActivePageContainer from 'sham-ui-router/active-page-container' %}
...

...
`

$3

Helper for build params for href-to directive

Type: Object

#### Examples

`javascript
{% import path from 'sham-ui-router/params' %}
...

Foo

...
`

#### param

Add param for page

##### Parameters

- name string Param name
- value any Param value

Returns ParamsBuilder

#### \_params

Set params

##### Parameters

- value Object

Returns ParamsBuilder

#### \_useActiveClass

Use active class

Returns ParamsBuilder

#### \_activeClass

Set active class

##### Parameters

- activeClass string

Returns ParamsBuilder

$3

Create new ParamsBuilder

#### Parameters

- path string Name of destination page

Returns ParamsBuilder

$3

Directive for links

#### Parameters

- component

#### Examples

`javascript
...

Foo

....
`

$3

Hook for process lazy page after loader finish. Can override with DI.bind( 'router:lazy-page' )

#### Parameters

- pageComponent Class<Component>

Returns Class<Component>

$3

Router service

#### Parameters

- DI Object App DI container
- root (string | null) Root URL (optional, default null)
- useHash boolean Use hash symbol as delimiter (optional, default false)
- hash string Hash symbol (use useHash=true) (optional, default '#')

#### Examples

`javascript
import FooPage from '../components/FooPage.sht';
import BarPage from '../components/BarPage.sht';
import Router from 'sham-ui-router';

const router = new Router();
router
.bindPage(
'/foo', // URL
'foo', // Name
FooPage, // Component class
{ componentOption: 1 } // Component options
)
.bindLazyPage( '/bar/:some_param/detail', 'bar', () => import( '../src/components/BarPage' ), {} )
.resolve();
`

#### bindPage

Bind page component & url

##### Parameters

- url string Url for page
- name string Page name\*
- pageComponent Class<Component> Component for page
- componentOptions Object Options for component

Returns Router

#### bindLazyPage

Bind lazy loaded page component & url

##### Parameters

- url string Url for page
- name string Page name
- loader Function Loader for page component
- componentOptions Object Options for component

Returns Router

#### navigateToRoute

Go to route by name

##### Parameters

- name string Page name
- params Object? Optional page params

#### resolve

Resolve current url & run router

#### notFound

- See:

Not found handler

#### navigate

Changing the page

##### Parameters

- url string Destination url

#### hooks

- See:

Hooks

##### Parameters

- hooks Object Object with hooks

#### generate

- See:

Generate url for page

##### Parameters

- name string
- params Object?

##### Examples

`javascript
router
.bindPage( '/trip/:tripId/edit', 'trip.edit', PageComponent, {} )
.bindPage( '/trip/save', 'trip.save', PageComponent, {} )
.bindPage( '/trip/:action/:tripId', 'trip.action', PageComponent, {} );
console.log(router.generate('trip.edit', { tripId: 42 })); // --> /trip/42/edit
console.log(router.generate('trip.action', { tripId: 42, action: 'save' })); // --> /trip/save/42
console.log(router.generate('trip.save')); // --> /trip/save
`

$3

Type: RouterStorage

$3

- See:

Data storage for router service

Type: Object

#### Properties

- url string Current page url
- name string Current page name
- params Object Current page params
- query string Current page query
- activePageComponent Class<Component> Current page component class
- activePageOptions Object Options for current page component
- pageLoaded` boolean Current page component loaded (@see Router.bindLazyPage)