VUEJS-如何从 url 中删除参数

Posted 2023-02-22

【中文标题】VUEJS-如何从 url 中删除参数

【英文标题】：VUEJS-How to remove parameter from url

【发布时间】：2018-07-19 21:56:26

【问题描述】：

我在 url 中有多个参数。我正在使用以下代码在 url 中添加新参数：

this.$router.push(query: Object.assign(, this.$route.query, cities: '1,45'));

但是当我取消选择城市时，它仍然会在 url 中保留带有城市参数的最后一个 id：

projects#/?cities=2189673&gender=male&range=100

实际上我只想删除城市参数。我该怎么办？

进一步如何获取url的所有参数发布到php？

【问题讨论】：

这个answer 可能会帮助您删除对象属性

是的，我也是这样，但是地址栏不生效

【参考方案1】：

我知道这不是最好的解决方案，因为它依赖于第三方库。

Lodash 是一套管理数据集合的函数。

如果你想从 URL 中删除 's' 查询参数，使用 Lodash，你可以这样做：

// remove a param from $route.query
var newRouteQuery = _.omit(this.$route.query, 's');
this.$router.replace(  query: newRouteQuery  );

_.omit() Lodash 的函数将对象作为第一个参数，并返回相同的对象，但不包含第二个参数中列出的键的项目。由于在这种情况下，我们只传递一个字符串作为第二个参数（字符串 's'），因此该函数将只省略对象的一个​​索引。

这个函数的 vanilla-javascript 实现是这样的（注意：ie8 不支持这个，如果你不使用 webpack，请记住）。

// Omit 's' from vue router query params
var newRouteQuery = ;
Object.keys(this.$route.query).forEach(function(key)
    if (key != 's')
        newRouteQuery[key] = this.$route.query[key];
);

要将所有这些参数传递给 PHP，您基本上需要一个 Ajax API 来发送请求。您可以通过 POST、GET 或任何其他方法将this.$route.query 的内容传递给服务器。

使用 Fetch API（它不需要任何额外的库并且具有几乎完整的浏览器支持），您可以执行以下操作：

return fetch('/process.php', 
    method: 'POST',
    cache: 'no-cache', // don't cache the response
    credentials: 'omit', // don't send cookies
    body: JSON.stringify(this.$route.query)
)
.then(function(response)
    // ...

在这种情况下，我正在发送一个 POST 请求，其中数据作为请求正文中的 JSON 字符串。有不同的方式来发送数据和不同类型的请求。您应该研究适合您的 PHP 环境和 JS 环境的最佳方法（您可能已经在加载 Ajax 库）。

【参考方案2】：

一种选择是使用 vuex 并将您的城市存储在提供的 store 状态中。然后，您可以使用此处存储的城市来选择相关城市。

因为您的城市存储在 vuex 商店中，所以当您想发布到 php 时也可以访问它们。您可以在商店中创建一个操作来执行此操作。

网络上的文档很容易理解。

Vuex documentation

【参考方案3】：

使用 Vue 3 和 Vue Router 4，我能够解决这个问题。

为简洁起见，添加一个查询参数我会这样做：

router.push( name: 'Search', query:  'q': searchCriteria.value  );

然后（在我的情况下）清除所有参数，我只有一个，这样做：

router.push( name: 'Search' );

我想，如果你还有这样的参数：

router.push( name: 'Search', query:  'q': searchCriteria.value, 'b': 'Another'  );

你可以这样做（我假设，我没有测试过）：

router.push( name: 'Search', query:  'b': 'Another'  );