VUEJS-如何从网址中删除参数

Question

我在网址中有多个参数。我正在使用以下代码在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 是一套用于管理数据集合的函数。

如果您想使用 Lodash 从 URL 中删除 's' 查询参数，您可以执行以下操作：

// 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 库）。

Answer 2

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

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

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

Vuex 文档