本文介绍了如何替换Vuejs路由器中的一个参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们有一个多级多租户应用程序，其中主机名标识"供应商"帐户，但客户帐户实际上是URL的一部分。
例如，我们的路由设置如下：
/:locale/app/:customer_id/invoices
/nl/app/4/invoices更改为/nl/app/5/invoices。所以基本上我想做的就是告诉VueJs路由器采用当前路由，只需更改该路由中的一个参数值。
正如您可以想象的：:locale参数也是如此，我们基本上在顶部有一个语言开关。
我知道您可以将$router.push与命名路由结合使用，并传入当前参数，替换我要更新的参数，但这意味着我必须命名每条路由，并且在进行更新时我需要知道路由名称。
有没有办法只要求VueJS路由器"给我当前路由"，然后更新一个参数？
我在SO和其他资源上搜索了很多，但到目前为止没有得到好的结果.
推荐答案
此功能实际上不需要命名路由或手动创建路径。路由器的push和replace方法支持部分补丁。您可以构建一个简单的可重用函数来实现这一点：
// This function expects router instance and params object to change
function updatePathParams($router, newParams) {
// Retrieve current params
const currentParams = $router.currentRoute.params;
// Create new params object
const mergedParams = { ...currentParams, newParams };
// When router is not supplied path or name,
// it simply tries to update current route with new params or query
// Almost everything is optional.
$router.push({ params: mergedParams });
}
在您的组件中，您可以按如下方式使用它：
onClickHandler() {
updatePathParams(this.$router, { locale: 'en-us' });
// Sometime later
updatePathParams(this.$router, { customer_id: 123 });
}
此外，这里我将params对象与现有值合并以说明这一想法。实际上，您不需要传递所有参数。如果您只想更改一个参数，比如customer_id，那么只需执行以下操作：$router.push({ params: { customer_id: 1234 } })。VUE路由器足够智能，可以保留相同的路由并保持其他参数(locale此处)不变。
这篇关于如何替换Vuejs路由器中的一个参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！