fix(route): GET parameter were not working with new history mode

PnX-SI · Jan 4, 2025 · fc49957 · fc49957
1 parent 021768e
commit fc49957
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/src/components/ConfiguratorWidget.vue b/src/components/ConfiguratorWidget.vue
@@ -1,6 +1,7 @@
 <script setup>
 import "leaflet/dist/leaflet.css";
 import { ref } from "vue";
+import { useRoute } from "vue-router";
 import Map from "@/components/core/Map.vue";
 import TaxonList from "@/components/core/TaxonList.vue";
 import Filters from "@/components/core/Filters.vue";
@@ -10,17 +11,19 @@ const wktSelected = ref("");
 const dateMin = ref(null);
 const dateMax = ref(null);
 
-const params = new URLSearchParams(window.location.search);
-if (params.has("radius")) {
+const route = useRoute();
+const params = route.query;
+
+if ("radius" in params) {
   radius.value = parseInt(params.get("radius"));
 }
-if (params.has("wkt")) {
-  wktSelected.value = params.get("wkt");
+if ("wkt" in params) {
+  wktSelected.value = params.wkt;
 }
-if (params.has("dateMin")) {
+if ("dateMin" in params) {
   dateMin.value = params.get("dateMin");
 }
-if (params.has("dateMax")) {
+if ("dateMax" in params) {
   dateMax.value = params.get("dateMax");
 }
 </script>

diff --git a/src/components/ListWidget.vue b/src/components/ListWidget.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import TaxonList from "@/components/core/TaxonList.vue";
+import { useRoute } from "vue-router";
 
 const radius = ref(1);
 const wktSelected = ref();
@@ -9,21 +10,21 @@ const wktSelected = ref();
 const dateMin = ref(null);
 const dateMax = ref(null);
 
-onMounted(() => {
-  const params = new URLSearchParams(window.location.search);
-  if (params.has("radius")) {
-    radius.value = parseInt(params.get("radius"));
-  }
-  if (params.has("wkt")) {
-    wktSelected.value = params.get("wkt");
-  }
-  if (params.has("dateMin")) {
-    dateMin.value = params.get("dateMin");
-  }
-  if (params.has("dateMax")) {
-    dateMax.value = params.get("dateMax");
-  }
-});
+const route = useRoute();
+const params = route.query;
+
+if ("radius" in params) {
+  radius.value = parseInt(params.get("radius"));
+}
+if ("wkt" in params) {
+  wktSelected.value = params.wkt;
+}
+if ("dateMin" in params) {
+  dateMin.value = params.get("dateMin");
+}
+if ("dateMax" in params) {
+  dateMax.value = params.get("dateMax");
+}
 </script>
 
 <template>

diff --git a/src/components/MapListWidget.vue b/src/components/MapListWidget.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import TaxonList from "@/components/core/TaxonList.vue";
 import Map from "./core/Map.vue";
 
@@ -9,17 +10,19 @@ const wktSelected = ref(null);
 const dateMin = ref(null);
 const dateMax = ref(null);
 
-const params = new URLSearchParams(window.location.search);
-if (params.has("radius")) {
+const route = useRoute();
+const params = route.query;
+
+if ("radius" in params) {
   radius.value = parseInt(params.get("radius"));
 }
-if (params.has("wkt")) {
-  wktSelected.value = params.get("wkt");
+if ("wkt" in params) {
+  wktSelected.value = params.wkt;
 }
-if (params.has("dateMin")) {
+if ("dateMin" in params) {
   dateMin.value = params.get("dateMin");
 }
-if (params.has("dateMax")) {
+if ("dateMax" in params) {
   dateMax.value = params.get("dateMax");
 }
 </script>

diff --git a/src/main.js b/src/main.js
@@ -8,11 +8,7 @@ import ListWidget from "./components/ListWidget.vue";
 import ConfiguratorWidget from "./components/ConfiguratorWidget.vue";
 import Error404 from "./components/commons/Error404.vue";
 
-import {
-  createWebHistory,
-  createWebHashHistory,
-  createRouter,
-} from "vue-router";
+import { createWebHashHistory, createRouter } from "vue-router";
 import { createI18n } from "vue-i18n";
 import messagesFR from "./assets/languageAssets/fr";
 import messagesEN from "./assets/languageAssets/en";