如果 vue-router 中没有值，如何不显示查询参数？答案

【问题标题】：How can I not display a query parameter if it doesn't have a value in vue-router?如果 vue-router 中没有值，如何不显示查询参数？
【发布时间】：2019-11-22 05:43:28
【问题描述】：

我正在使用 vue 和 vue-router 构建一个应用程序。我创建了一个登录组件，其中包含电子邮件和密码的常用字段，以及忘记密码router-link。我想要做的是从电子邮件字段传递电子邮件，如果用户已经输入它但然后单击忘记密码按钮。这就是用户被转移到 resetPassword 组件的方式：

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

这就是我在路由器中处理路由的方式：

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

这个解决方案有效，但我唯一的问题是，如果用户没有输入电子邮件，我会得到一个如下所示的 url：

localhost:8080/resetpassword?email=

虽然我希望它看起来像这样：

localhost:8080/resetpassword

如何省略空电子邮件查询参数？我必须在 vue-router 的配置中做些什么吗？我在文档中找不到这方面的内容。

【问题讨论】：

没有看到太多隐藏可选查询参数的方法，但要考虑的另一种模式是使用vuex 保存电子邮件并从forgot_password 视图中的商店读取它。跨度>

标签： vue.js vue-router

【解决方案1】：

我找到了解决方案。唯一需要的改变是：

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

所以当参数 email 没有被设置时，它也不会被添加到 url。

【讨论】：