vue.js - VUEJS-如何从url中删除参数

Question

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

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

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

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

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

进一步如何获取 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 库)。