How can I not display a query parameter if it doesn't have a value in vue-router?

Question

I'm building an app using vue and vue-router. I've created a Login component with the usual fields for email and password, and a forgot password router-link. What I wanted to do was to pass the email from the email field if the user has typed it in already but then clicked on the forgot password button. This is how the user gets transferred to the resetPassword component:

<router-link :to="{ name: 'resetPassword',  query: { email } }">
    Forgot password
</router-link>

and this is how I handle the route within the router:

{
  path: '/resetpassword/:email?',
  name: 'resetPassword',
  component: require('../components/ResetPassword').default,
  props: route => ({ email: route.query.email }),
},

this solution works but my only issue is that if the user hasn't typed in an email I will get an url that will look like this:

localhost:8080/resetpassword?email=

while I want it to look like this:

localhost:8080/resetpassword

how can I omit the empty email query parameter? Do I have to do something in the config of vue-router? I couldn't find something about this in the documentation.

Not seeing much out there for hiding the optional query parameter, but an alternative pattern to consider is to use vuex to hold the email and read it from the store in forgot_password view. — Len Joseph
– Len Joseph, Commented Jul 12, 2019 at 12:50

captain · Accepted Answer · 2019-07-12 13:06:38Z

0

I've found the solution. The only change that was need was this:

<router-link :to="{ name: 'resetPassword',  query: { email || undefined} }">
    Forgot password
</router-link>

and so when the parameter email hasn't been set it is also not being added to the url.

answered Jul 12, 2019 at 13:06

captain

1,8777 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I not display a query parameter if it doesn't have a value in vue-router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related