Как заменить один параметр в роутере Vuejs - PullRequest
Новая
       15

Как заменить один параметр в роутере Vuejs

0 голосов
/ 30 мая 2019

У нас есть многоуровневое мультитенантное приложение, в котором имя хоста идентифицирует учетную запись «поставщика», но учетная запись клиента фактически является частью URL.

Например, у нас есть маршруты, настроенные следующим образом: 

/:locale/app/:customer_id/invoices

В верхней части страницы есть выпадающий список со всеми идентификаторами клиентов, к которым у пользователя есть доступ. Основная идея заключается в том, что когда пользователь меняет клиента, маршрут меняется, например, с /nl/app/4/invoices на /nl/app/5/invoices. Поэтому я хочу сказать, чтобы маршрутизатор VueJ выбрал текущий маршрут и просто изменил одно значение параметра в этом маршруте.

Как вы можете себе представить: то же самое относится и к параметру :locale, где у нас в основном есть переключатель языка сверху.

Я знаю, что вы можете использовать $router.push в сочетании с именованным маршрутом и передавать текущие параметры, заменяя параметры, которые я хочу обновить, но это означало бы, что мне придется называть каждый маршрут, и я бы мне нужно знать, как называется маршрут, когда я делаю обновление.

Нет ли способа просто попросить VueJS Router «дать мне текущий маршрут» и обновить один параметр?

Я много искал как на SO, так и на других ресурсах, но пока не получил хорошего результата ...

1 Ответ

1 голос
/ 31 мая 2019

Для этой функции вам не нужны именованные маршруты или ручное создание пути. Методы 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 здесь) без изменений.

...