如何使用 vue spa 应用程序删除 url 中的查询字符串？

Posted 2023-02-22

【中文标题】如何使用 vue spa 应用程序删除 url 中的查询字符串？

【英文标题】：How to remove query string in url with vue spa application?

【发布时间】：2021-07-16 18:38:09

【问题描述】：

一个 Vue2 应用程序，例如(http://www.example.com)。两条路线（'/'、'/dashboard'）和'/'将被重定向到'/dashboard'。

现在另一个 sso 系统（例如 http://www.sso.com）发送重定向到 http://www.example.com?token=xxxxxx，

然后浏览器执行重定向，Vue路由器将路由识别为'/'并且

然后根据路由器设置重定向到'/dashboard'。

但是现在，浏览器地址栏中的 url 就像http://www.example.com?token=xxxxxx#/dashboard，虽然应用程序可以工作，但我想从地址栏中删除查询字符串 '?token=xxxxxx' 但失败了。

我尝试了两种方法：

设置 window.location.search=null，但 '?'标志仍在网址中。 当 'to' 为 '/' 时使用导航守卫 next('/dashboard')，同样失败。

请有人帮忙，谢谢。

【参考方案1】：

在仪表板组件中使用 router.push 删除查询字符串。

<script>
export default 
  data() 
    return 

    ;
  ,
  created: function () 
    let self = this;
    self.$router.push('/dashboard');
  ,
;
</script>

【讨论】：

谢谢@shahidiqbal，明天试试，那个push trigger 'created'功能会重复吗？

不，当您导航到 /dashboard 路线时，它只会运行一次。