Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Commit

Permalink
docs(vue-router-url-sync): integrate feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
rayrutjes committed Aug 5, 2017
1 parent 05fe76c commit 8f6b8e2
Showing 1 changed file with 13 additions and 10 deletions.
23 changes: 13 additions & 10 deletions docs/docgen/src/advanced/vue-router-url-sync.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ editable: true
githubSource: docs/docgen/src/advanced/vue-router-url-sync.md
---

In this guide, you will learn how to synchronize your InstantSearch experience with the [official Vue-Router](https://github.com/vuejs/vue-router).
In this guide you will learn how to synchronize your InstantSearch experience with the [official Vue-Router](https://github.com/vuejs/vue-router).

There are two things you will want to setup in order to have the Vue router play nicely with InstantSearch.

Expand All @@ -26,12 +26,17 @@ A fully working example of synchronizing the Vue router with Vue InstantSearch c
In the example app linked above, we register one route that looks like this:

```javascript
{
name: 'search',
path: '/search',
component: Search,
props: route => ({ query: route.query.q }),
}
const router = new VueRouter({
routes: [
{
name: 'search',
path: '/search',
component: Search,
props: route => ({ query: route.query.q }),
},
// ...
],
});
```

This route will pass down the `query` parameter as a prop to the `Search` component.
Expand Down Expand Up @@ -70,9 +75,7 @@ Now, every time the route changes, the search store query will be updated with t

## Keep Vue router in sync with Vue router

Previous section helped us making sure that when a route changes, the search state is also updated.

Here you will learn how to push new state to the router in order to keep URL's in sync with the current search state as users interact with it.
The previous section made our search state aware of the route, here we will learn how to push new state to the router in order to keep URLs in sync with the current search state as users interact with it.

In our `Search.vue` file, we [manually instantiated the search store](/getting-started/search-store.html#how-to-manually-create-a-search-store) and exposed it to our template by adding it to `data`.

Expand Down

0 comments on commit 8f6b8e2

Please sign in to comment.