时间戳

首页 > 解决方案 > 如何替换Vuejs路由器中的一个参数

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

问题描述

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

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

/:locale/app/:customer_id/invoices

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

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

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

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

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

标签： javascriptvue.jsvue-router

解决方案

对于此功能，您实际上并不需要命名路由或手动路径创建。路由器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 对象与现有值合并以说明这个想法。实际上，您不需要传递所有params。如果您只想更改一个参数，例如customer_id，那么只需执行以下操作：$router.push({ params: { customer_id: 1234 } })。Vue-Router 足够聪明，可以保留相同的路由并保持其他参数（locale此处）不变。

推荐阅读