# moon-router

> Router for Moon

Latest version **0.1.3** (published 2017-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install moon-router
pnpm add moon-router
yarn add moon-router
bun add moon-router
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2017-07-30 |
| First published | 2017-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Kabir Shah |
| Maintainers | kingkabir |
| Keywords | moon, router, router, route, moon |

## Links

- npm: https://www.npmjs.com/package/moon-router
- Repository: https://github.com/KingPixil/moon-router
- Homepage: https://github.com/KingPixil/moon-router#readme
- Issues: https://github.com/KingPixil/moon-router/issues
- npm.io page: https://npm.io/package/moon-router

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2017-07-30
- 0.1.2 — 2017-07-30
- 0.1.1 — 2017-07-27
- 0.1.0 — 2017-07-14
- 0.0.5 — 2017-05-23
- 0.0.4 — 2017-04-04
- 0.0.3 — 2017-03-19
- 0.0.2 — 2017-03-18
- 0.0.1 — 2017-02-25

## README

# Moon Router

A router plugin for Moon.

[![Build Status](https://travis-ci.org/KingPixil/moon-router.svg?branch=master)](https://travis-ci.org/KingPixil/moon-router)

### What?

Moon router lets you create basic routes that map to different components. Clicking a `router-link` will update the view, and updates the URL. To the user, it seems like going on a new URL, but in reality, they are on the same page.

### Install

With npm:

```bash
$ npm install moon-router
```

```js
var MoonRouter = require("moon-router");
Moon.use(MoonRouter)
```

With a CDN/Local:

```html
<script src="https://unpkg.com/moon-router"></script>
<script>
  Moon.use(MoonRouter);
</script>
```

### Usage

Initialize Moon router

```js
Moon.use(MoonRouter)
```

#### Creating Routes

**Before** you create your Moon instance, define your routes like this:
```js
var router = new MoonRouter({
  default: "/",
  map: {
    "/": "Root",
    "/hello": "Hello"
  }
});
```

This will map `/` to the `Root` component, and will map `/hello` to the `Hello` component.

The `default` route is `/`, if a URL is not found, Moon will display this route.

##### Dynamic Routes

Routes can also be dynamic, with support for query parameters, named parameters, and wildcards. These can be accessed via a `route` prop passed to the view component.

```js
var router = new MoonRouter({
  map: {
    "/:named": "Root", // `named` can be shown with {{route.params.named}}
    "/:other/parameter/that/is/:named": "Named",
    "/*": "Wildcard" // matches any ONE path
  }
});
```

* Named Parameters are in the `route.params` object
* Query Parameters are in the `route.query` object (`/?key=val`)

Just remember, to access the special `route` variable, you must state it is a prop in the component, like:

```js
Moon.component("Named", {
  props: ['route'],
  template: '<h1></h1>'
});
```

#### Define Components

After initializing Moon Router, define any components referenced.

```js
Moon.component("Root", {
  template: `<div>
    <h1>Welcome to "/"</h1>
    <router-link to="/hello">To /hello</router-link>
  </div>`
});

Moon.component("Hello", {
  template: `<div>
    <h1>You have Reached "/hello"</h1>
    <router-link to="/">Back Home</router-link>
  </div>`
});
```

You will notice the `router-link` component. This is by default, rendered as an `a` tag, and should **always be used** to link to routes. A class of `router-link-active` will be applied to the active link by default, unless another class is provided in `options.activeClass`.

When clicking on this link, the user will be shown the new route at the `router-view` component (see below), and will not actually be going to a new page.

#### Installing Router to Instance

When creating your Moon instance, add the Moon Router instance as the option `router`

```js
new Moon({
  el: "#app",
  router: router
});
```

```html
<div id="app">
  <router-view></router-view>
</div>
```

This will install the Moon Router to the Moon Instance, and when you visit the page, you will notice the URL changes to `/#/`

The `router-view` is a component that will display the current mapped route.

### License

Licensed under the [MIT License](https://kingpixil.github.io/license) By [Kabir Shah](https://kabir.ml)

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