9

我在 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？

4

3 回答 3

4

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

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 来发送请求。您可以this.$route.query通过 POST、GET 或任何其他方法将 的内容传递给服务器。

使用 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 库）。

于 2018-08-06T13:43:43.190 回答
0

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

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

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

Vuex 文档

于 2018-02-09T11:04:15.360 回答
0

使用 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' } });
于 2021-08-18T12:27:48.940 回答