fix(useRouteParams,useRouteQuery): set route param/query to undefined…

… when null or defaultValue (#3583) Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vueuse · Feb 20, 2024 · c44fea4 · c44fea4
1 parent b33ab7b
commit c44fea4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()