如何替换 Vuejs 路由器中的一个参数

Question

我们有一个多级多租户应用程序，其中主机名标识"供应商"帐户，但客户帐户实际上是URL的一部分。

例如，我们设置了如下路线：

/:locale/app/:customer_id/invoices

在页面顶部，我们有一个下拉列表，其中包含用户有权访问的所有客户 ID。 这个想法基本上是，当用户更改客户时，路由会从/nl/app/4/invoices更改为/nl/app/5/invoices。 所以基本上我想做的是告诉 VueJs 路由器采用当前路由，并只更改该路由中的一个参数值。

可以想象：:locale参数也是如此，我们基本上在顶部有一个语言开关。

我知道您可以将$router.push与命名路由结合使用，并传递当前参数，替换我要更新的参数，但这意味着我必须命名每个路由，并且我需要知道路由名称是什么当我进行更新时。

有没有办法只要求 VueJS 路由器"给我当前路由"，并更新一个参数？

我已经在SO以及其他资源上搜索了很多，但到目前为止没有得到一个好的结果......

Answer 1

此功能实际上不需要命名路由或手动路径创建。路由器的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-Router 足够聪明，可以保留相同的路由并保持其他参数(此处locale)不变。