1 | # vue-router-sync
|
2 |
|
3 | [![NPM version](https://img.shields.io/npm/v/vue-router-sync.svg?style=flat)](https://npmjs.com/package/vue-router-sync) [![NPM downloads](https://img.shields.io/npm/dm/vue-router-sync.svg?style=flat)](https://npmjs.com/package/vue-router-sync) [![CircleCI](https://circleci.com/gh/egoist/vue-router-sync/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-router-sync/tree/master)
|
4 |
|
5 | Keep vm data and router state in sync.
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```bash
|
10 | yarn add vue-router-sync
|
11 | ```
|
12 |
|
13 | CDN: [UNPKG](https://unpkg.com/vue-router-sync/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-router-sync/) (available as `window.RouterSync`)
|
14 |
|
15 | ## Usage
|
16 |
|
17 | Note that this is supposed to work with `vue-router`:
|
18 |
|
19 | ```js
|
20 | import Vue from 'vue'
|
21 | import RouterSync from 'vue-router-sync'
|
22 |
|
23 | Vue.use(RouterSync)
|
24 | ```
|
25 |
|
26 | Then in your component
|
27 |
|
28 | ```vue
|
29 | <script>
|
30 | export default {
|
31 | data() {
|
32 | return {
|
33 | foo: 'foo'
|
34 | }
|
35 | },
|
36 | syncDataRouter: {
|
37 | foo: 'foo_in_query'
|
38 | }
|
39 | }
|
40 | </script>
|
41 | ```
|
42 |
|
43 | Mount the app and the URL will be updated to `/?foo_in_query=foo`. Everytime the `foo` is changed the corresponding URL query will be updated too.
|
44 |
|
45 | ## License
|
46 |
|
47 | MIT © [EGOIST](https://github.com/egoist)
|