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