You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 30, 2022. It is now read-only.
* docs(routing): document full version of IS router, not shorthand in guide
* docs(routing): only document object form
* feat(router): force object form
* docs(examples): use object form
* fix(InstantSearch): no unreachable code
* docs: split up in bullets
Co-Authored-By: Haroenv <fingebimus@me.com>
Currently there's three existing ways how to use InstantSearch routing.
15
14
16
-
The first option is putting `:routing="true"` on `ais-instant-search`. This will use the default serialising that doesn't lose any information, but might be a bit verbose
17
15
18
-
The second option is to put an object of configuration. This object can take `stateMapping`, with the functions `stateToRoute` and `routeToState` to serialise differently, but still use the default routing. This allows to rename things to make them easier to read, without touching how the serialising itself happens.
16
+
The `routing` prop on `ais-instant-search` accepts an object. The simplest way to get started without customising URLs at all is the following:
19
17
20
-
Finally, you can also change the URL to use full URLs, rather than just the query string. You need to change the `router` key inside the `routing` object. You can import the default (history) router from `import {history} from 'instantsearch.js/es/lib/routers'`, and modify, like in InstantSearch JS.
import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
32
+
import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
23
33
24
-
All docs for InstantSearch routing configuration are [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html).
34
+
export default {
35
+
data() {
36
+
return {
37
+
historyRouter,
38
+
simpleMapping,
39
+
};
40
+
},
41
+
};
42
+
</script>
43
+
```
44
+
45
+
They're routing object contains two keys: `history` and `stateMapping`:
25
46
26
-
Finally an option is to use Vue Router. All previous examples will _work_ using Vue Router, as long as they don't conflict, as long as you don't try to do specific Vue Router things which are controlled by InstantSearch, since InstantSearch provided query strings won't be available to Vue Router, as soon as the routing changes from its initial deserialization.
47
+
-**history**: used for writing and reading to the URL,
48
+
-**stateMapping**: used for mapping the InstantSearch state towards the state that will be read and written to the URL.
27
49
28
-
## How **do** I use Vue Router?
50
+
If you want to customise which things are written in the URL but don't want to customise how exactly the URL looks you will use state mapping. The way to do this is replacing the call to `stateMapping` with an object with the functions `stateToRoute` and `routeToState`.
29
51
30
-
If you have a Vue Router configuration that requires a synchronized use of the query parameters, or other parameters, as described in the InstantSearch guide, you need to write a custom "router" key for InstantSearch:
52
+
If you also want to customise how the URL is read and written, for example when you are using Vue Router, you will override the behaviour of `router`. Note however that to use Vue Router, you don't **need** to synchronise InstantSearch routing to Vue Router routing, the only reason to do is if you are doing other router functions on your search page as well, and want to avoid conflicts when both are writing to the URL at the same time. To do this, you pass an object to the `router` key:
31
53
32
54
```js
55
+
constrouter=this.router; /* get this from Vue Router */
56
+
33
57
constinstantSearchRouting= {
34
58
router: {
35
59
read() {
@@ -102,3 +126,5 @@ const router = new Router({
102
126
```
103
127
104
128
Note that the `qs` module is already used in InstantSearch, so this will not add to your bundle size, unless you use a different version.
129
+
130
+
All docs for InstantSearch routing configuration are [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html).
Copy file name to clipboardexpand all lines: docs/src/components/InstantSearch.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -53,7 +53,7 @@ Name | Type | Default | Description | Required
53
53
`index-name` | String | | The index to target for the search | yes
54
54
`searchFunction` | `(AlgoliaHelper) => void` | | A hook that will be called each time a search needs to be done, with the [helper](https://community.algolia.com/algoliasearch-helper-js/) as a parameter. It’s your responsibility to call `helper.search()`. This option allows you to avoid doing searches at page load for example. | no
55
55
`stalled-search-delay` | Number | `200` | Time (in ms) before the search is considered unresponsive. Used to display a loading indicator. | no
56
-
`routing` | Boolean or Object | `false` | Enable the default routing feature by passing `true`. More advanced usage is documented [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html). | no
56
+
`routing` | Object | | documented [here](/advanced/vue-router-url-sync.html). | no
57
57
class-names | Object | `{}` | Override class names | no
Copy file name to clipboardexpand all lines: docs/src/getting-started/migration.md
+1-3
Original file line number
Diff line number
Diff line change
@@ -160,9 +160,7 @@ If you're using this, and have suggestions or questions, [please get in touch](h
160
160
161
161
3. Routing
162
162
163
-
Routing is not fully fleshed out yet. It's possible to set the `routing` prop to `true` or an object with the options, but it doesn't integrate with Vue Router yet at this point.
164
-
165
-
If you're using this, and have suggestions, [please get in touch](https://github.com/algolia/vue-instantsearch/issues/new?template=v2_feedback.md).
163
+
You're now able to use routing in InstantSearch with, or without Vue Router. Read more on how to use that [here](/advanced/vue-router-url-sync.html).
0 commit comments