vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.74k stars 1.15k forks source link

Optional parameters type missmatch on push and popstate back navigation #2212

Closed tragid closed 2 months ago

tragid commented 2 months ago

Reproduction

https://github.com/tragid/vue-router-popstate-bug

Steps to reproduce the bug

  1. Create route with optional parameter
    {
    path: '/debug/:paramId?',
    name: 'debug',
    }
  2. Push to route with optional parameter by name without param router.push({ name: 'debug' })
  3. Watch that route.params.paramId is undefined.
  4. Push to same route with parameter router.push({ name: 'debug', params: { paramId: '123' } })
  5. Watch that route.params.paramId is '123'.
  6. Go back by browser navigation
  7. Watch route.params.paramId is empty string instead of undefined.

Expected behavior

Optional parameter should by of one type rather undefined or empty string, when pushing to it or going back with browsers navigation.

Actual behavior

Optional parameter is undefined when is direct router.push, and empty string when going back with browser's navigation. If having some watcher on this parameter, it has false positive triggering.

Uploading Screen Recording 2024-04-16 at 12.18.58.mov…

Additional information

No response

posva commented 2 months ago

The param can be parsed in different ways so it can end up as either undefined or '' (empty string). In the end I decided to not normalize the value since both are usually check with if (!route.param.id).

In the future this will likely be overruled by a way to parse params like https://github.com/posva/unplugin-vue-router/discussions/303