如何使用vue-router从url中删除参数

bxgwgixi  于 2023-03-03  发布在  Vue.js
关注(0)|答案(4)|浏览(464)

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

qhhrdooz

qhhrdooz1#

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

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

_. omitute()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 库)。

nwnhqdif

nwnhqdif2#

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

tuwxkamq

tuwxkamq3#

有了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' } });
hgb9j2n6

hgb9j2n64#

要替换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 });

相关问题