vuejs / router

🚦 The official router for Vue.js

Home Page:https://router.vuejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Optional parameters type missmatch on push and popstate back navigation

tragid opened this issue · comments

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',
}
  1. Push to route with optional parameter by name without param router.push({ name: 'debug' })
  2. Watch that route.params.paramId is undefined.
  3. Push to same route with parameter router.push({ name: 'debug', params: { paramId: '123' } })
  4. Watch that route.params.paramId is '123'.
  5. Go back by browser navigation
  6. 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.

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

Additional information

No response

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 posva/unplugin-vue-router#303