feat(warn): warn against removed params

See #1527

Author: posva

packages/router/__tests__/matcher/resolve.spec.ts

@@ -16,6 +16,8 @@ const component: RouteComponent = defineComponent({})
 const components = { default: component }
 
 describe('RouterMatcher.resolve', () => {
+  mockWarn()
+
   function assertRecordMatch(
     record: RouteRecordRaw | RouteRecordRaw[],
     location: MatcherLocationRaw,
@@ -775,17 +777,19 @@ describe('RouterMatcher.resolve', () => {
       )
     })
 
-    it('drops non existent params', () => {
+    it('discards non existent params', () => {
       assertRecordMatch(
         { path: '/', name: 'home', components },
-        { name: 'home', params: { a: 'b' } },
+        { name: 'home', params: { a: 'a', b: 'b' } },
         { name: 'home', path: '/', params: {} }
       )
+      expect('invalid param(s) "a", "b" ').toHaveBeenWarned()
       assertRecordMatch(
         { path: '/:b', name: 'a', components },
         { name: 'a', params: { a: 'a', b: 'b' } },
         { name: 'a', path: '/b', params: { b: 'b' } }
       )
+      expect('invalid param(s) "a"').toHaveBeenWarned()
     })
 
     it('drops optional params', () => {
@@ -818,7 +822,6 @@ describe('RouterMatcher.resolve', () => {
   })
 
   describe('LocationAsRelative', () => {
-    mockWarn()
     it('warns if a path isn not absolute', () => {
       const record = {
         path: '/parent',

packages/router/__tests__/warnings.spec.ts

@@ -1,5 +1,5 @@
 import { mockWarn } from 'jest-mock-warn'
-import { createMemoryHistory, createRouter } from '../src'
+import { createMemoryHistory, createRouter, createRouterMatcher } from '../src'
 import {
   defineAsyncComponent,
   defineComponent,
@@ -287,4 +287,26 @@ describe('warnings', () => {
       'It should be called exactly one time in each navigation guard'
     ).toHaveBeenWarned()
   })
+
+  it('warns when discarding params', () => {
+    const record = {
+      path: '/a',
+      name: 'a',
+      components: {},
+    }
+    const matcher = createRouterMatcher([record], {})
+    matcher.resolve(
+      { name: 'a', params: { no: 'a', foo: '35' } },
+      {
+        path: '/parent/one',
+        name: undefined,
+        params: { old: 'one' },
+        matched: [] as any,
+        meta: {},
+      }
+    )
+    expect('invalid param(s) "no", "foo" ').toHaveBeenWarned()
+    // from the previous location
+    expect('"one"').not.toHaveBeenWarned()
+  })
 })

packages/router/src/matcher/index.ts

@@ -247,6 +247,21 @@ export function createRouterMatcher(
           location,
         })
 
+      // warn if the user is passing invalid params so they can debug it better when they get removed
+      if (__DEV__) {
+        const invalidParams: string[] = Object.keys(
+          location.params || {}
+        ).filter(paramName => !matcher!.keys.find(k => k.name === paramName))
+
+        if (invalidParams.length) {
+          warn(
+            `Discarded invalid param(s) "${invalidParams.join(
+              '", "'
+            )}" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.`
+          )
+        }
+      }
+
       name = matcher.record.name
       params = assign(
         // paramsFromLocation is a new object