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(ths.$router, { locale: 'en-us' });

  // Sometime later
  updatePathParams(ths.$router, { customer_id: 123 });
}

此外，在这里，我将params对象与现有值合并以说明这一想法。实际上，您不需要传递所有参数。如果您只想更改一个参数customer_id，则只需执行：$router.push({ params: { customer_id: 1234 } })。 Vue-router非常聪明，可以保留相同的路由并保持其他参数（此处为locale）不变。

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

1 个答案: