Войдите или зарегистрируйтесь
Вы сможете писать комментарии и посты, ставить лайки и другое
Поиск
Тёмная тема

Nuxt 3 и 4: проблема со множественными вызовами navigateTo

21 ч. назад
На работе на одном проекте столкнулся в Nuxt 4 с проблемой, когда в page-компоненте нужно делать разные редиректы через navigateTo() по различным условиям в процессе выполнения setup функции. Примерно так:

<template>
  Some page
</template>

<script lang="ts" setup>
if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
}

if (2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
}

if (3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
}

if (4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
}
</script>

Тут возникает проблема: в конечном итоге срабатывает редирект на самый последний урл, т.е. в коде выше переход будет на /?abc=4. Я порылся в документации, не нашёл ничего встроенного, чтобы избежать срабатывания последующих вызовов navigateTo. Вроде как это поведение связано с vue router.

Вот так написать тоже нельзя:
if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  return; // так нельзя в script setup
}

Пришлось делать единственное решение - это завести boolean-переменную и проверять уже её.

let isAlreadyRedirected = false;

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}
Ещё раз - это единственное, что решило проблему. Если у вас есть какое-то другое решение, напишите плиз.
+1
3
0
Комментариев пока нет