我在url中有多个参数。我正在使用以下代码在url中添加新参数:this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});但当我取消选择城市,它仍然保持最后的id与城市参数在url:projects#/?cities=2189673&gender=male&range=100实际上我只想删除城市参数。我该怎么做?进一步如何获得所有参数的网址张贴到php?
this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});
projects#/?cities=2189673&gender=male&range=100
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(不需要任何额外的库,并且几乎具有完整的浏览器支持),您可以执行以下操作:
this.$route.query
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 库)。
nwnhqdif2#
一种选择是使用VUEX并将您的城市存储在提供的Store -State中,然后您可以使用存储在这里的城市来选择相关的城市。因为你的城市是存储在vuex商店里的,所以当你想发布到php的时候你也可以访问它们,你可以在你的商店里创建一个动作来实现这一点。网络上的文档非常容易遵循。Vuex documentation
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' } });
hgb9j2n64#
要替换token但保留其他查询参数,可以使用router.replace或router.push ;
token
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 });
4条答案
按热度按时间qhhrdooz1#
我知道这不是最好的解决方案,因为它依赖于第三方库。
Lodash是一套用于管理数据集合的函数。
如果要使用Lodash从URL中删除“s”查询参数,可以执行以下操作:
_. omitute()Lodash函数的第一个参数是Object,返回的是同一个对象,但是没有第二个参数中列出的键的项。因为在本例中,我们只传递了一个字符串作为第二个参数(字符串“s”),所以函数只会省略对象的一个索引。
这个函数的vanilla-javascript实现如下所示(注意:ie8不支持这个,如果你不使用webpack,请记住)。
要将所有这些参数传递给PHP,基本上需要一个 AJAX API来发送请求,可以通过POST、GET或任何其他方法将
this.$route.query
的内容传递给服务器。使用Fetch API(不需要任何额外的库,并且几乎具有完整的浏览器支持),您可以执行以下操作:
在本例中,我发送了一个POST请求,请求正文中包含JSON字符串形式的数据。发送数据和请求类型有不同的方法。您应该研究一下最适合您的PHP环境和JS环境的方法(您可能已经加载了 AJAX 库)。
nwnhqdif2#
一种选择是使用VUEX并将您的城市存储在提供的Store -State中,然后您可以使用存储在这里的城市来选择相关的城市。
因为你的城市是存储在vuex商店里的,所以当你想发布到php的时候你也可以访问它们,你可以在你的商店里创建一个动作来实现这一点。
网络上的文档非常容易遵循。
Vuex documentation
tuwxkamq3#
有了Vue 3和Vue路由器4,我就能弄清楚了。
为了简单起见,添加查询参数时,我会执行以下操作:
然后(在我的情况下)清除所有的参数,我只有一个,这样做:
我想,如果你有另一个参数,像这样:
你可以这样做(我假设,我没有测试它):
hgb9j2n64#
要替换
token
但保留其他查询参数,可以使用router.replace或router.push ;