vue-router
vue-router copied to clipboard
TS throwing "missing param for named route..." when param is empty string and runtime error when is empty string
Version
3.6.5
Reproduction link
Steps to reproduce
- Create a route with an optional param
- Attempt to navigate to route with param explicitly undefined -- This works but throws TS issue
- Attempt to then navigate using param as empty string -- This navigates to the page, but the URL does not change, (it actually goes to root I think), and in addition to this, it throws a TS error.
What is expected?
undefined is still an error, but empty string should work.
What is actually happening?
TS error, or runtime error.
When you do this.$router.push( { name: 'about', params: { id: undefined } } ). This works, but throws a TS error
When you do this.$router.push( { name: 'about', params: { id: '' } } ), this does NOT work, but throws no error.
It will "appear" as if it works (for the second) but will not actually change the URL, and will throw a console warn.
This issue does not occur for vue-router@4 & vue 3
(Kind of redundant) The actual issue was stemmed from this code:
this.$router.push({
name: 'About',
params: {
id: user?.id
}
})
^ This throws ts error
this.$router.push({
name: 'About',
params: {
id: user?.id ?? ''
}
})
^ This throws runtime error
My point on this last part is that I can't simply just remove the param statement, its dynamic.
v3 is a bit stricter here but it could indeed handle it if the runtime already works. As a workaround, you can can try to omit the param:
params: user ? { id: user.id } : {}
Hello is this issue still open to solve?