From c44fea4fcfc6313d61226ba5bc06905140d74692 Mon Sep 17 00:00:00 2001
From: Manoah Tervoort <46671786+mtdvlpr@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:10:33 +0100
Subject: [PATCH] fix(useRouteParams,useRouteQuery): set route param/query to
 undefined when null or defaultValue (#3583)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/router/useRouteParams/index.test.ts |  2 +-
 packages/router/useRouteParams/index.ts      |  4 ++--
 packages/router/useRouteQuery/index.test.ts  | 20 +++++++++++++++++++-
 packages/router/useRouteQuery/index.ts       |  4 ++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/router/useRouteParams/index.test.ts b/packages/router/useRouteParams/index.test.ts
index e3407d3366f..58f0567b440 100644
--- a/packages/router/useRouteParams/index.test.ts
+++ b/packages/router/useRouteParams/index.test.ts
@@ -202,7 +202,7 @@ describe('useRouteParams', () => {
     await nextTick()
 
     expect(page.value).toBe(1)
-    expect(route.params.page).toBe(1)
+    expect(route.params.page).toBeUndefined()
     expect(onUpdate).not.toHaveBeenCalled()
   })
 
diff --git a/packages/router/useRouteParams/index.ts b/packages/router/useRouteParams/index.ts
index b968baaac67..40061112f18 100644
--- a/packages/router/useRouteParams/index.ts
+++ b/packages/router/useRouteParams/index.ts
@@ -62,8 +62,8 @@ export function useRouteParams<
         if (param === v)
           return
 
-        param = v
-        _paramsQueue.set(name, v)
+        param = (v === defaultValue || v === null) ? undefined : v
+        _paramsQueue.set(name, (v === defaultValue || v === null) ? undefined : v)
 
         trigger()
 
diff --git a/packages/router/useRouteQuery/index.test.ts b/packages/router/useRouteQuery/index.test.ts
index 34e2e18b308..b0d40f08d77 100644
--- a/packages/router/useRouteQuery/index.test.ts
+++ b/packages/router/useRouteQuery/index.test.ts
@@ -222,7 +222,7 @@ describe('useRouteQuery', () => {
     await nextTick()
 
     expect(page.value).toBe(1)
-    expect(route.query.page).toBe(1)
+    expect(route.query.page).toBeUndefined()
     expect(onUpdate).not.toHaveBeenCalled()
   })
 
@@ -263,4 +263,22 @@ describe('useRouteQuery', () => {
     expect(page.value).toBe(2)
     expect(lang.value).toBe('en-US')
   })
+
+  it.each([{ value: 'default' }, { value: null }, { value: undefined }])('should reset value when $value value', async ({ value }) => {
+    let route = getRoute({
+      search: 'vue3',
+    })
+    const router = { replace: (r: any) => route = r } as any
+
+    const search: Ref<any> = useRouteQuery('search', 'default', { route, router })
+
+    expect(search.value).toBe('vue3')
+    expect(route.query.search).toBe('vue3')
+
+    search.value = value
+
+    await nextTick()
+
+    expect(route.query.search).toBeUndefined()
+  })
 })
diff --git a/packages/router/useRouteQuery/index.ts b/packages/router/useRouteQuery/index.ts
index 9d33947af15..53cd86dacc3 100644
--- a/packages/router/useRouteQuery/index.ts
+++ b/packages/router/useRouteQuery/index.ts
@@ -62,8 +62,8 @@ export function useRouteQuery<
         if (query === v)
           return
 
-        query = v
-        _queriesQueue.set(name, v)
+        query = (v === defaultValue || v === null) ? undefined : v
+        _queriesQueue.set(name, (v === defaultValue || v === null) ? undefined : v)
 
         trigger()