fix: null should be preserved in relative navigations

packages/router/__tests__/router.spec.ts

@@ -331,6 +331,19 @@ describe('Router', () => {
     expect(router.currentRoute.value.params).toEqual({})
   })
 
+  it('removes null/undefined optional params when current location has it on relative navigations', async () => {
+    const { router } = await newRouter()
+    const withParam = router.resolve({ name: 'optional', params: { p: 'a' } })
+    const implicitNull = router.resolve({ params: { p: null } }, withParam)
+    const implicitUndefined = router.resolve(
+      { params: { p: undefined } },
+      withParam
+    )
+
+    expect(implicitNull.params).toEqual({})
+    expect(implicitUndefined.params).toEqual({})
+  })
+
   it('keeps empty strings in optional params', async () => {
     const { router } = await newRouter()
     const route1 = router.resolve({ name: 'optional', params: { p: '' } })

packages/router/src/encoding.ts

@@ -1,3 +1,4 @@
+import { assign } from './utils'
 import { warn } from './warning'
 
 /**
@@ -120,14 +121,34 @@ export function encodePath(text: string | number): string {
 /**
  * Encode characters that need to be encoded on the path section of the URL as a
  * param. This function encodes everything {@link encodePath} does plus the
- * slash (`/`) character. If `text` is `null` or `undefined`, returns an empty
- * string instead.
+ * slash (`/`) character. If `text` is `null` or `undefined`, it keeps the value as is.
  *
  * @param text - string to encode
  * @returns encoded string
  */
-export function encodeParam(text: string | number | null | undefined): string {
-  return text == null ? '' : encodePath(text).replace(SLASH_RE, '%2F')
+export function encodeParam(
+  text: string | number | null | undefined
+): string | null | undefined {
+  return text == null ? text : encodePath(text).replace(SLASH_RE, '%2F')
+}
+
+/**
+ * Remove nullish values from an object. This function creates a copy of the object. Used for params and query.
+ *
+ * @param obj - plain object to remove nullish values from
+ * @returns a new object with only defined values
+ */
+export function withoutNullishValues(
+  obj: Record<string, unknown>
+): Record<string, unknown> {
+  const targetParams = assign({}, obj)
+  for (const key in targetParams) {
+    if (targetParams[key] == null) {
+      delete targetParams[key]
+    }
+  }
+
+  return targetParams
 }
 
 /**

packages/router/src/utils/index.ts

@@ -13,10 +13,18 @@ export function isESModule(obj: any): obj is { default: RouteComponent } {
 
 export const assign = Object.assign
 
+export function applyToParams(
+  fn: (v: string | number | null | undefined) => string | null | undefined,
+  params: RouteParamsRaw | undefined
+): RouteParamsRaw
 export function applyToParams(
   fn: (v: string | number | null | undefined) => string,
   params: RouteParamsRaw | undefined
-): RouteParams {
+): RouteParams
+export function applyToParams(
+  fn: (v: string | number | null | undefined) => string | null | undefined,
+  params: RouteParamsRaw | undefined
+): RouteParams | RouteParamsRaw {
   const newParams: RouteParams = {}
 
   for (const key in params) {