sham-ui-router v6.1.0

sham-ui-router

Router for sham-ui

Install

# npm
npm install sham-ui-router

# 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

LinkToOptions

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'

LinkTo

Component for link to page

Properties

• options LinkToOptions

ActivePageContainer

Component-container for page

Examples

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

ParamsBuilder

Helper for build params for href-to directive

Type: Object

Examples

{% import path from 'sham-ui-router/params' %}
...
<a :hrefto={{path("foo").param("id", 2)}} class="custom-class-1 custom-class-2">
 Foo
</a>
...

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

path

Create new ParamsBuilder

Parameters

• path string Name of destination page

Returns ParamsBuilder

HrefTo

Directive for links

Parameters

• component

Examples

...
  <a :hrefto={{ {"path": "foo",  "params": params} }} class="custom-class-1 custom-class-2">
    Foo
  </a>
....

lazyPage

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

Parameters

• pageComponent Class<Component>

Returns Class<Component>

Router

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

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: https://github.com/krasimir/navigo#not-found-handler

Not found handler

navigate

Changing the page

Parameters

• url string Destination url

hooks

• See: https://github.com/krasimir/navigo#hooks

Hooks

Parameters

• hooks Object Object with hooks

generate

• See: https://github.com/krasimir/navigo#named-routes

Generate url for page

Parameters

• name string
• params Object?

Examples

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

routerStorage

Type: RouterStorage

RouterStorage

• See: https://github.com/sham-ui/sham-ui-data-storage

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)