chore(vue-router): update deps and adjust example

Author: rayrutjes

examples/vue-router/package.json

@@ -9,10 +9,10 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "qs": "^6.5.0",
     "vue": "^2.2.1",
-    "vue-router": "^2.4.0",
     "vue-instantsearch": "*",
-    "instantsearch-store": "*"
+    "vue-router": "^2.6.0"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

examples/vue-router/src/Search.vue

@@ -1,6 +1,16 @@
 <template>
-  <ais-index :search-store="searchStore" :query="query">
+  <ais-index :search-store="searchStore">
+
     <ais-input placeholder="Search for a product..."/>
+
+    <ais-price-range attribute-name="price"></ais-price-range>
+    
+    <ais-refinement-list attribute-name="colors"></ais-refinement-list>
+
+    <ais-tree-menu :attributes="['category', 'sub_category']">
+      <h3 slot="header">Browse by</h3>
+    </ais-tree-menu>
+    
     <ais-results>
       <template scope="{ result }">
         <h2>{{ result.name }}</h2>
@@ -20,22 +30,28 @@ searchStore.indexName = 'ikea';
 
 export default {
   props: {
-    query: {
-      type: String,
+    queryParameters: {
+      type: Object,
       default: '',
     },
   },
+  created() {
+    this.searchStore.queryParameters = this.queryParameters;
+  },
   data() {
     return {
       searchStore,
     };
   },
   watch: {
-    'searchStore.query'(value) {
+    'searchStore.queryParameters'(parameters) {
+      const query = parameters;
+      delete query.index;
+
       this.$router.push({
-        name: 'search',
-        query: { q: value },
-      });
+         name: 'search',
+         query,
+       });
     },
   },
 };

examples/vue-router/src/main.js

@@ -3,20 +3,30 @@ import VueRouter from 'vue-router';
 import InstantSearch from 'vue-instantsearch';
 import App from './App.vue';
 import Search from './Search.vue';
+import qs from 'qs';
 
 Vue.use(InstantSearch);
 Vue.use(VueRouter);
 
+
 const router = new VueRouter({
   routes: [
     {
       name: 'search',
       path: '/search',
       component: Search,
-      props: route => ({ query: route.query.q }),
+      props: route => ({ queryParameters: route.query }),
     },
     { path: '/', redirect: '/search' },
   ],
+  parseQuery(query) {
+    return qs.parse(query);
+  },
+  stringifyQuery(query) {
+      var result = qs.stringify(query);
+
+      return result ? ('?' + result) : '';
+  }
 });
 
 new Vue({