# vue-query-router

> Vue Query Router for routing by query in Vue Router

Latest version **1.1.0** (published 2022-12-11) · GNU GPL v3 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-query-router
pnpm add vue-query-router
yarn add vue-query-router
bun add vue-query-router
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-12-11 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | GNU GPL v3 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 356.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eugene Serb |
| Maintainers | eugene-serb |
| Keywords | vue-router, vue.js, vue-query-router, query-routing |

## Links

- npm: https://www.npmjs.com/package/vue-query-router
- Repository: https://github.com/eugene-serb/vue-query-router
- Homepage: https://github.com/eugene-serb/vue-query-router#readme
- Issues: https://github.com/eugene-serb/vue-query-router/issues/
- npm.io page: https://npm.io/package/vue-query-router

## Dependencies (1)

- [vue-router](https://npm.io/package/vue-router.md) ^4.1.5

## 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

- 1.1.0 (latest) — 2022-12-11
- 1.0.14 — 2022-10-30
- 1.0.13 — 2022-10-30
- 1.0.12 — 2022-09-11
- 1.0.11 — 2022-09-10
- 1.0.10 — 2022-09-10
- 1.0.9 — 2022-09-10
- 1.0.8 — 2022-09-07
- 1.0.7 — 2022-09-07
- 1.0.6 — 2022-09-07
- 1.0.5 — 2022-09-05

## README

# vue-query-router
Vue Query Router for routing by query in Vue Router

## Installing

`npm install vue-query-router`

## About

Context.
You are building a single page application (SPA) and you need to add a page
to Vue.js and do routing for a direct connection without server side
rendering (SSR), rehydration, Nuxt.js or other heavy tools and other words.

Objective.
We will add the about page on our example.com project.

## Usage with TypeScript

Step 1.
Add an HTML file named «about.html» to the public folder, redirected to "/?about".

```html
  <!DOCTYPE html>
  <html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Example – About</title>
      <meta charset="UTF-8" />
      <meta http-equiv="refresh" content="0; URL=https://example.com/?about" />
    </head>
  </html>
```

Step 2.
Add your «about» route to the routes array.

```ts
  import { RouteRecordRaw } from 'vue-router';

  const routes: Array<RouteRecordRaw> = [
    {
      path: '/about',
      name: 'about-view',
      component: () => import('@/views/AboutView.vue'),
    },
  ];

  export default routes;
```

Step 3.
Next step will be add route to the queries array.

```ts
  import IQueryRoute from 'vue-query-router/src/types/IQueryRoute';

  const queries: Array<IQueryRoute> = [
    {
      query: '/?about',
      path: '/about',
    },
  ];

  export default queries;
```

Step 4.
Open router index file, and add call QueryRouter.update 
after router init and before export router .

```ts
  import {
    createRouter, createWebHistory,
    NavigationGuardNext, RouteLocationNormalized
  } from 'vue-router';
  import QueryRouter from '@vue-query-router';
  import routes from '@/router/assets/routes';
  import queries from '@/router/assets/queries';

  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
  });

  router.beforeEach((
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext,
  ) => {
    QueryRouter.update(to, from, next, router, queries);
  });

  export default router;
```

Step 5.
You may need to add an entry to the declaration file, for example 'modules.d.ts'.

```ts
  declare module 'vue-query-router';
```

## Types
There are three types. IQueryRoute for all queries array.

```ts
  import IQueryRoute from 'vue-query-router/src/types/IQueryRoute';
```

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