VUEJS-如何从url中删除参数

wi3ka0sx  于 2022-12-14  发布在  Vue.js
关注(0)|答案(4)|浏览(512)

我在url中有多个参数。我在url中添加新参数,代码如下:
this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});
但是当我取消选择城市时,它仍然保留URL中带有城市参数的最后一个id:
projects#/?cities=2189673&gender=male&range=100
实际上我只想删除城市参数,怎么办?
进一步如何获得所有参数的网址张贴到php?

eaf3rand

eaf3rand1#

我知道这不是最好的解决方案,因为它依赖于第三方库。
Lodash是一套用于管理数据集合的函数。
如果要使用Lodash从URL中删除“s”查询参数,可以执行以下操作:

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

Lodash函数的第一个参数是一个Object,返回的是同一个对象,但没有第二个参数中列出的键。因为在本例中,我们只传递了一个字符串作为第二个参数(字符串'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 库)。

ttcibm8c

ttcibm8c2#

一个选择是使用VUEX并将您的城市存储在提供的Store -State中。然后您可以使用此处存储的城市来选择相关的城市。
因为你的城市存储在vuex商店里,所以当你想发布到php时,你也可以访问它们。你可以在你的商店里创建一个动作来完成这个任务。
网络上的文档非常容易遵循。
Vuex documentation

yqhsw0fo

yqhsw0fo3#

有了Vue 3和Vue路由器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' } });
ipakzgxi

ipakzgxi4#

要替换token但保留其他查询参数,可以使用router.replace或router.push ;

router.beforeEach(async (to, from) => { ...
      // construct new query {} without 'token' and push it
      const query = (({token, ...o }) => o)(to.query)
      router.push({ name: to.name,  query: query });

相关问题