Использую библиотеку navigo. При вызове метода navigate функция, отрисовывающая страницу, вызывается до того как изменится URL

Question

Делаю SPA приложение.

По нажатию на кнопку вызывается функция router.navigate(`/bank-account-${data.account}`); , где data.account - номер банковского счета.

Далее маршрутизатор начинает отрисовку станицы

  router
    .on('/authorization', () => {
      deletePreviousPage();
      renderAuthorization(createNewPage());
    })
    .on('/balance-history', () => {
      deletePreviousPage();
      renderBalanceHistory(createNewPage());
    })
    .on(/bank-account-\d+/, () => {             // здесь
      deletePreviousPage();
      renderBankAccInfo(createNewPage());
    })
    .on('/bank-accounts', () => {
      deletePreviousPage();
      renderBankAccounts(createNewPage());
    })
    .on('/cash-machines', () => {
      deletePreviousPage();
      renderCashMachines(createNewPage());
    })
    .on('/currencies', () => {
      deletePreviousPage();
      renderCurrencies(createNewPage());
    })
    .resolve();

На странице я получаю номер банковского счета из URL чтобы отрисовать его и в дальнейшем использовать для получения полной информации по нему.

const accountNumber = window.location.pathname.match(/bank-account-(\d+)/)[1];

НО! Этого сделать не получается, так как оказалось, что URL меняется не до отрисовки страницы, а асинхронно через N миллисекунд.

Как мне быть в этой ситуации?

Answer 1

Я не так и не нашел ничего путного в документации navigo, но решил вопрос проще.

window.history.pushState({}, '', `/bank-account-${data.account}`);
router.resolve();

Answer 2

Adding a route

document.getElementById(
  "app"
).innerHTML = `<a href="/bank-account-12345?foo=bar#anchor-here" data-navigo>click me</a>`;

const router = new Navigo("/");

router.on(
  /bank-account-(\d+)/,
  function (match) {
    document.getElementById("app").innerHTML =
      `<pre>ACCOUNT_ID=${match.data[0]}</pre>`;
    console.log(match);
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/navigo/8.11.1/navigo.min.js"></script>

<div id="app"></div>

БЛОГ НА HUSL

Использую библиотеку navigo. При вызове метода navigate функция, отрисовывающая страницу, вызывается до того как изменится URL

Ответы (2 шт):