vuejs this.$route 地址栏问题

Posted 2023-02-22

【中文标题】vuejs this.$route 地址栏问题

【英文标题】：vuejs this.$route issue with address bar

【发布时间】：2018-07-31 01:24:31

【问题描述】：

当我删除一个参数时，它不会在地址栏中生效。 我尝试以下行从 URL 中删除参数。

delete this.$route.query[parameter_name];

见下面的网址，注意以下事项。

在控制台查询对象为空，但地址栏包含所有参数。

我尝试了以下几行来从 URL 中删除申请者和分支参数。它仅在控制台中生效，因为您可以看到查询对象为空但 URL 仍然存在。

delete this.$route.query['applicants'];

delete this.$route.query['branches'];

但地址栏仍然有所有已删除的参数。

donate#/?applicants=Female&branches=2207962

【参考方案1】：

这将与$router.push 或$router.replace 一起使用以清除查询字符串。

清除组件生命周期挂钩内的查询字符串。

mounted() 
  this.$router.replace( query:  '': null  );

清除重定向时的查询字符串。

$router.push( path: 'url-path', query:  '': null  )
$router.replace( path: 'url-path', query:  '': null  )

删除旧查询字符串值并替换为新值。

$router.push(path: 'url-path', query: '': null, lastname: 'Ever', firstname: 'Greatest')
$router.replace( path: 'url-path', query:  '': null  token: 'coolToken' )

【参考方案2】：

使用delete 将删除属性但不会更新地址栏。 您需要以编程方式指定重定向。见Programmatic Navigation。

你可以使用

this.$router.push('donate')

或者

this.$router.replace('donate')

替换当前的历史记录（参见@thanksd 的评论）

【讨论】：

我会使用this.$router.replace( query: )

谢谢，我在答案中添加了replace

很好@Thanksd，我明白了。但是我有案例，我在地址栏中有 3 个参数，我想删除其中的 1 个并想保留另外 2 个。我该如何推送或替换为其他 2？

当我尝试 this.$router.push(path:'donate',query: filterObj); 它工作正常但地址看起来很糟糕http://project.seedout/donate#/donate?branches=2196379 捐赠应该只有一次。

用斜线试试：this.$router.push( path: '/donate', query: filterObj )