Warning when using pathMatch

[narwajea]

Version

4.0.8

Reproduction link

https://jsfiddle.net/cwbe2yq3/

Steps to reproduce

Open JSFiddle
Open console
Click on "Home" link

What is expected?

No warning in console

What is actually happening?

Warning in console:
[Vue Router warn]: Path "/dev" was passed with params but they will be ignored. Use a named route alongside params instead.

[PeterAlfredLee]

Hi, @narwajea
This might be a workaround: use name and params in redirect instead of path.
see this: https://jsfiddle.net/h8c6gojt/1

const router = createRouter({
  history: createWebHistory(),
  routes: [
  {
    name: "home",
    path: "/:env",
    component: Home,
  },
  { path: "/:pathMatch(.*)*", redirect: {name: "home", params: {env: "dev"}}},
  ],
})

[narwajea]

@PeterAlfredLee thank you, it works indeed, as suggested in the warning message. But I think it is hiding the real issue because in that case, no warning should be displayed.

[PeterAlfredLee]

Hi @narwajea . I think the warning is useful here.

A params can be parsed from the path: "/:pathMatch(.*)*". At the same time, you are using redirect, this will lead to a recursive call of router.resolve. The new call is using pathMatch(.*) as the params and using /dev as path. In this case, a new params can be parsed from /dev, which is different with the existing one "/:env". That's why we got a warning here.

In short words, a route like this:

{ path: "/", redirect: 'dev' }

will not generate any warnings. This is complicated. Hope this helps.

Maybe we can improve the warning message here. Maybe we can use a warning like Path "${(rawLocation as any).path}" was passed with params "${(rawLocation as any).params}" but they will be ignored. Please use a named route alongside params instead. WDYT? @posva