# vue2-composition-router

> Helper functions for vue router with vue 2 and composition api

Latest version **1.0.2** (published 2022-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-composition-router
pnpm add vue2-composition-router
yarn add vue2-composition-router
bun add vue2-composition-router
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-01-17 |
| First published | 2022-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | luminisward |
| Maintainers | luminisward |

## Links

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

## Dependencies (2)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^1.8.0

## Recent versions

- 1.0.2 (latest) — 2022-01-17
- 1.0.1 — 2022-01-01
- 1.0.0 — 2022-01-01

## README

# Vue2 Composition Router

Some router helpers for vue2 with composition api.

## Install

```bash
npm install vue2-composition-router
# or
yarn add vue2-composition-router
```

## Usage

### useRouter / useRoute

```ts
import { useRouter, useRoute } from 'vue2-composition-router'

export default {
  setup() {
    // router instance, equivalent to `this.$router`
    const router = useRouter()

    // current route, equivalent to `this.$route`
    const route = useRoute()
  }
}
```

### useRouteQueries / useRouteQuery

Example path: `/?foo=left&bar=1`

```ts
import { useRouteQueries, useRouteQuery } from 'vue2-composition-router'

export default {
  setup() {
    // get
    const queries = useRouteQueries()  // { foo: 'left', bar: '1' }
    const foo = useRouteQuery('foo')   // 'left'

    // set
    queries.value = { bar: '2' }       // /?bar=2
    foo.value = 'right'                // /?bar=2&foo=right
  }
}
```

### useRouteParams / useRouteParam

Example route config:
```js
{
    path: '/example/:foo/:bar?',
    ...
}
```

Example path: `/example/left/1`

```ts
import { useRouteParams, useRouteParam } from 'vue2-composition-router'

export default {
  setup() {
    // get
    const params = useRouteParams()           // { foo: 'left', bar: '1' }
    const foo = useRouteParam('foo')          // 'left'

    // set
    params.value = { foo: 'right', bar: '2' } // /example/right/2
    foo.value = 'center'                      // /example/center
  }
}
```

`useRouteParams` will parse current route config path and pick up dynamic route params automatically.

## useRouteParamOrQuery

Same as `useRouteParam` and `useRouteQuery`, but the difference is that it automatically bind param or query based on whether the route param includes the key name.

```ts
import { useRouteParamOrQuery } from 'vue2-composition-router'

export default {
  setup() {
    // if 'foo' is exist in param, it binds param, or else it binds query.
    const foo = useRouteParamOrQuery('foo') 
  }
}
```

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