Question

我在url中有多个参数。我在url中添加了新参数，代码如下：

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

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

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

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

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

Answer 1

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

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

网络上的文档非常容易理解。

Vuex documentation

Answer 2

我知道这不是最好的解决方案，因为它在第三方库上进行中继。

Lodash是一套用于管理数据收集的功能。

如果要使用Lodash从URL中删除“ s”查询参数，则可以执行以下操作：

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

_.omit() Lodash的函数将一个Object作为第一个参数，并返回相同的对象，但第二个参数中未列出键项。因为在这种情况下，我们只传递一个字符串作为第二个参数（字符串“ s”），所以该函数将只忽略该对象的一个索引。

此功能的原始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库）。

VUEJS-如何从url中删除参数

2 个答案: