Updating Navlink.vue for preserving query param

learningequality · Dec 16, 2024 · e7dcf6e · e7dcf6e
1 parent df406a8
commit e7dcf6e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/docs/common/DocsPageTemplate/SideNav/NavLink.vue b/docs/common/DocsPageTemplate/SideNav/NavLink.vue
@@ -7,14 +7,15 @@
   >
     {{ page.title }}
   </div>
-  <a
+  <router-link
     v-else
+     :to="computedLink"
     class="block enabled-link"
     :href="page.path"
     :class="{ 'current-page': currentPage, code: page.isCode }"
   >
     {{ page.title }}
-  </a>
+  </router-link>
 
 </template>
 
@@ -39,6 +40,13 @@
       currentPage() {
         return this.page.path === this.$route.path;
       },
+       computedLink() {
+      // Preserve query parameters in the link
+      return {
+        path: this.page.path,
+        query: { ...this.$route.query },
+      };
+    },
     },
   };
 

diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -126,19 +126,19 @@
         }, 2000); // 2-second debounce delay
       }
 
-      // Modify navigation links to preserve the filter query
-      this.$nextTick(() => {
-        this.$refs.links.querySelectorAll('a').forEach(link => {
-          link.addEventListener('click', event => {
-            event.preventDefault();
-            const href = new URL(link.href);
-            this.$router.push({
-              path: href.pathname,
-              query: { ...this.$route.query }, // Add existing query params to the new path
-            });
-          });
-        });
-      });
+      // // Modify navigation links to preserve the filter query
+      // this.$nextTick(() => {
+      //   this.$refs.links.querySelectorAll('a').forEach(link => {
+      //     link.addEventListener('click', event => {
+      //       event.preventDefault();
+      //       const href = new URL(link.href);
+      //       this.$router.push({
+      //         path: href.pathname,
+      //         query: { ...this.$route.query }, // Add existing query params to the new path
+      //       });
+      //     });
+      //   });
+      // });
       //  Don't show the nav until the state is set
       this.loaded = true;
     },