如何替换Vuejs路由器中的一个参数 [英] How to replace one parameter in Vuejs router

问题描述

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

例如，我们的路由设置如下：

/:locale/app/:customer_id/invoices

在页面顶部，我们有一个包含用户有权访问的所有客户ID的下拉列表。其基本思想是，当用户更改客户时，例如，路由从/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路由器中的一个参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！