使用更改刷新 Vue 页面

Posted 2023-02-22

【中文标题】使用更改刷新 Vue 页面

【英文标题】：refresh vue page with change

【发布时间】：2019-05-25 22:58:46

【问题描述】：

我有一个索引页面，其中包含存储员工姓名的预输入输入。选择名称后，路由器将带有参数的 vue 推送到应用程序 div 中。

this.$router.push( name: 'About', params:  email: item.email  )

当 vue 加载时，mounted 方法会触发并运行查找函数。当它刷新时我有

  beforeRouteUpdate (to, from, next) 
    // react to route changes...
     this.getPubsSorted()
                 ,

选择不同的名称，因为Vue不改变所安装的方法不会触发。我的问题是地址栏显示参数，单击不同名称时它不会改变。有没有办法隐藏浏览器地址栏中显示的参数？

  http://localhost:8080/about/[e-mail]

我看过hide query params in address bar - VueJS

但它谈到了

https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

我不知道如何在现有的 vue 上触发我的函数。我试过设置 cookie，但这也不会触发任何事情。谢谢

【问题讨论】：

您希望该地址不应包含例如[e-mail]？

它显示了真实的电子邮件地址，我想隐藏它。 And when the second name is selected the address bar stays with the first email.完全混乱

您究竟想从哪里清除旧电子邮件中的地址栏？

我创建了一个 hack。我使用与用户 ID 相同的真实电子邮件设置了一个 cookie，并将参数作为 Date.now() 传递。我在 vue 端读取了 cookie，但地址栏显示localhost:8080/about/1545966159597。事件仍在发生。就像我说的那样，这是一个 hack，应该有一个“强制刷新”之类的东西。但我很新

【参考方案1】：

您可以使用以下代码从旧电子邮件中清除您的地址：

if (window.location.href.indexOf("@") > -1) 
  window.history.pushState("", "", "/about");

输入任何你想清除电子邮件的代码。

【讨论】：

这行得通——我一直在寻找 VUE.js 解决方案，但有时答案就在我们面前。谢谢