# sham-ui-router

> Router for sham-ui

Latest version **6.1.0** (published 2024-03-15) · 0 weekly downloads

## Install

```sh
npm install sham-ui-router
pnpm add sham-ui-router
yarn add sham-ui-router
bun add sham-ui-router
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.1.0 |
| Published | 2024-03-15 |
| First published | 2018-03-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eugeny Burnashov |
| Maintainers | shamcode |

## Links

- npm: https://www.npmjs.com/package/sham-ui-router
- npm.io page: https://npm.io/package/sham-ui-router

## Dependencies (3)

- [navigo](https://npm.io/package/navigo.md) 7.1.2
- [sham-ui](https://npm.io/package/sham-ui.md) ^6.0.0
- [sham-ui-data-storage](https://npm.io/package/sham-ui-data-storage.md) ^3.0.0

## Recent versions

- 6.1.0 (latest) — 2024-03-15
- 6.0.0 — 2023-11-14
- 6.0.0-alpha.7 — 2023-10-23
- 6.0.0-alpha.6 — 2023-09-26
- 6.0.0-alpha.4 — 2022-12-08
- 6.0.0-alpha.3 — 2022-10-27
- 6.0.0-alpha.2 — 2022-10-24
- 6.0.0-alpha.1 — 2022-10-07
- 5.0.0 — 2022-08-09
- 5.0.0-alpha.9 — 2022-04-14
- 5.0.0-alpha.8 — 2021-11-26
- 5.0.0-alpha.7 — 2021-11-08
- 5.0.0-alpha.6 — 2021-09-27
- 5.0.0-alpha.5 — 2021-09-07
- 5.0.0-alpha.4 — 2021-09-03
- … 34 more at https://npm.io/package/sham-ui-router/versions

## README

# sham-ui-router

[![Build Status](https://travis-ci.com/sham-ui/sham-ui-router.svg?branch=master)](https://travis-ci.com/sham-ui/sham-ui-router)
[![npm version](https://badge.fury.io/js/sham-ui-router.svg)](https://badge.fury.io/js/sham-ui-router)
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)

Router for sham-ui

## Install

```bash
# npm
npm install sham-ui-router
```

```bash
# yarn
yarn add sham-ui-router
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

#### Table of Contents

-   [LinkToOptions](#linktooptions)
    -   [Properties](#properties)
-   [LinkTo](#linkto)
    -   [Properties](#properties-1)
-   [ActivePageContainer](#activepagecontainer)
    -   [Examples](#examples)
-   [ParamsBuilder](#paramsbuilder)
    -   [Examples](#examples-1)
    -   [param](#param)
        -   [Parameters](#parameters)
    -   [\_params](#_params)
        -   [Parameters](#parameters-1)
    -   [\_useActiveClass](#_useactiveclass)
    -   [\_activeClass](#_activeclass)
        -   [Parameters](#parameters-2)
-   [path](#path)
    -   [Parameters](#parameters-3)
-   [HrefTo](#hrefto)
    -   [Parameters](#parameters-4)
    -   [Examples](#examples-2)
-   [lazyPage](#lazypage)
    -   [Parameters](#parameters-5)
-   [Router](#router)
    -   [Parameters](#parameters-6)
    -   [Examples](#examples-3)
    -   [bindPage](#bindpage)
        -   [Parameters](#parameters-7)
    -   [bindLazyPage](#bindlazypage)
        -   [Parameters](#parameters-8)
    -   [navigateToRoute](#navigatetoroute)
        -   [Parameters](#parameters-9)
    -   [resolve](#resolve)
    -   [notFound](#notfound)
    -   [navigate](#navigate)
        -   [Parameters](#parameters-10)
    -   [hooks](#hooks)
        -   [Parameters](#parameters-11)
    -   [generate](#generate)
        -   [Parameters](#parameters-12)
        -   [Examples](#examples-4)
-   [routerStorage](#routerstorage)
-   [RouterStorage](#routerstorage-1)
    -   [Properties](#properties-2)

### LinkToOptions

Options for LinkTo

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Name of page for link. Default ''
-   `params` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Params of page for link. Default {}
-   `text` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Text for link. Default ''
-   `useActiveClass` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use activeClass options for active page link. Default false
-   `activeClass` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Class name for active link. Default 'active'

### LinkTo

Component for link to page

#### Properties

-   `options` **[LinkToOptions](#linktooptions)** 

### ActivePageContainer

Component-container for page

#### Examples

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

### ParamsBuilder

Helper for build params for href-to directive

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Examples

```javascript
{% 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Param name
-   `value` **any** Param value

Returns **[ParamsBuilder](#paramsbuilder)** 

#### \_params

Set params

##### Parameters

-   `value` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 

Returns **[ParamsBuilder](#paramsbuilder)** 

#### \_useActiveClass

Use active class

Returns **[ParamsBuilder](#paramsbuilder)** 

#### \_activeClass

Set active class

##### Parameters

-   `activeClass` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

Returns **[ParamsBuilder](#paramsbuilder)** 

### path

Create new ParamsBuilder

#### Parameters

-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Name of destination page

Returns **[ParamsBuilder](#paramsbuilder)** 

### HrefTo

Directive for links

#### Parameters

-   `component`  

#### Examples

```javascript
...
  <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&lt;Component>** 

Returns **Class&lt;Component>** 

### Router

Router service

#### Parameters

-   `DI` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** App DI container
-   `root` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | null)** Root URL (optional, default `null`)
-   `useHash` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use hash symbol as delimiter (optional, default `false`)
-   `hash` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Url for page
-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Page name\*
-   `pageComponent` **Class&lt;Component>** Component for page
-   `componentOptions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options for component

Returns **[Router](#router)** 

#### bindLazyPage

Bind lazy loaded page component & url

##### Parameters

-   `url` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Url for page
-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Page name
-   `loader` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Loader for page component
-   `componentOptions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options for component

Returns **[Router](#router)** 

#### navigateToRoute

Go to route by name

##### Parameters

-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Page name
-   `params` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Destination url

#### hooks

-   **See: <https://github.com/krasimir/navigo#hooks>**

Hooks

##### Parameters

-   `hooks` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Object with hooks

#### generate

-   **See: <https://github.com/krasimir/navigo#named-routes>**

Generate url for page

##### Parameters

-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `params` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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
```

### routerStorage

Type: [RouterStorage](#routerstorage)

### RouterStorage

-   **See: <https://github.com/sham-ui/sham-ui-data-storage>**

Data storage for router service

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

-   `url` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Current page url
-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Current page name
-   `params` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Current page params
-   `query` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Current page query
-   `activePageComponent` **Class&lt;Component>** Current page component class
-   `activePageOptions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options for current page component
-   `pageLoaded` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Current page component loaded (@see Router.bindLazyPage)

---
_Source: https://npm.io/package/sham-ui-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._