fix(experimental): keep last hash param instead of throwing

Author: posva

packages/router/src/unplugin/codegen/generateRouteParams.spec.ts

@@ -277,15 +277,17 @@ describe('EXPERIMENTAL_generateRouteParams', () => {
     expect(isTreeParamOptional(node.hashParams[0]!)).toBe(false)
   })
 
-  it('rejects multiple named hash params before generating types', () => {
+  it('keeps only the last hash param when several are declared', () => {
     const node = createTreeWithParam('page')
     node.setCustomRouteBlock('page.vue', {
-      params: { hash: { section: 'string', tab: 'string' } },
+      params: { hash: { section: 'string', other: 'int', tab: 'bool' } },
     })
-    expect(() => node.params).toThrow(
-      expect.objectContaining({ name: 'VUE_ROUTER_B0022' })
-    )
-    expect('Only one hash param can be declared per route').toHaveBeenWarned()
+    expect(node.hashParams).toEqual([
+      { paramName: 'tab', parser: 'bool', hash: true },
+    ])
+    // the getter runs again but warns once
+    void node.params
+    expect('using "tab" and ignoring: section, other').toHaveBeenWarnedTimes(1)
   })
 
   it('preserves hash declarations when merging overrides', () => {

packages/router/src/unplugin/core/definePage.spec.ts

@@ -316,16 +316,18 @@ definePage({ params: { hash: {
     expect(isTreeParamOptional(node.hashParams[0]!)).toBe(optional)
   })
 
-  it('rejects multiple named hash parameters with options', () => {
+  it('keeps the last of multiple named hash parameters with options', () => {
     const code = `definePage({ params: { hash: {
       section: { required: true }, tab: 'int'
     } } })`
     const node = new TreeNodeValueStatic('test', undefined)
     node.setOverride('test.ts', {
       params: extractDefinePageInfo(code, 'test.ts')!.params,
     })
-    expect(() => node.hashParams).toThrow()
-    expect('Only one hash param can be declared per route.').toHaveBeenWarned()
+    expect(node.hashParams).toEqual([
+      { paramName: 'tab', parser: 'int', hash: true },
+    ])
+    expect('using "tab" and ignoring: section').toHaveBeenWarned()
   })
 
   it('extracts all types of params', () => {

packages/router/src/unplugin/core/treeNodeValue.ts

@@ -61,6 +61,11 @@ class _TreeNodeValueBase {
    */
   private _warnedParsers = new Set<string>()
 
+  /**
+   * Ignored hash params last warned about, for the same reason.
+   */
+  private _warnedHashParams = ''
+
   /**
    * View name (Vue Router feature) mapped to their corresponding file. By default, the view name is `default` unless
    * specified with a `@` e.g. `index@aux.vue` will have a view name of `aux`.
@@ -148,22 +153,36 @@ class _TreeNodeValueBase {
    * Gets hash params declared on this node.
    */
   get hashParams(): TreeHashParam[] {
-    const entries = Object.entries(this.overrides.params?.hash ?? {})
-    if (entries.length > 1) {
-      throw diagnostics.VUE_ROUTER_B0022({
-        paramNames: entries.map(([name]) => name).join(', '),
-      })
-    }
-    return entries.map(([paramName, config]) => {
-      if (typeof config === 'string') config = { parser: config }
-      return {
-        paramName,
-        parser: config.parser || null,
-        defaultValue: config.default,
-        required: config.required,
-        hash: true,
+    const hash = this.overrides.params?.hash ?? {}
+    const paramNames = Object.keys(hash)
+    // the last one wins, like other overrides
+    const paramName = paramNames.at(-1)
+    if (paramNames.length > 1) {
+      const ignoredParamNames = paramNames.slice(0, -1).join(', ')
+      if (this._warnedHashParams !== ignoredParamNames) {
+        this._warnedHashParams = ignoredParamNames
+        diagnostics.VUE_ROUTER_B0022({
+          segment: this.rawSegment,
+          usedParamName: paramName!,
+          ignoredParamNames,
+        })
       }
-    })
+    }
+
+    let config = paramName ? hash[paramName] : undefined
+    if (typeof config === 'string') config = { parser: config }
+
+    return paramName && config
+      ? [
+          {
+            paramName,
+            parser: config.parser || null,
+            defaultValue: config.default,
+            required: config.required,
+            hash: true,
+          },
+        ]
+      : []
   }
 
   /**

packages/router/src/unplugin/diagnostics.ts

@@ -15,8 +15,12 @@ export const diagnostics = /*#__PURE__*/ defineDiagnostics({
   reporters: [/*#__PURE__*/ createConsoleReporter()],
   codes: {
     VUE_ROUTER_B0022: {
-      why: (p: { paramNames: string }) =>
-        `Only one hash param can be declared per route. Found: ${p.paramNames}.`,
+      why: (p: {
+        segment: string
+        usedParamName: string
+        ignoredParamNames: string
+      }) =>
+        `Only one hash param can be declared per route. In "${p.segment}", using "${p.usedParamName}" and ignoring: ${p.ignoredParamNames}.`,
       fix: 'Use one hash parser that returns an object with all extracted values.',
     },
     // --- core/definePage.ts ---