Nuxt 3 с navigationTo ERR_TOO_MANY_REDIRECTS
У меня есть пагинация, привязанная к адресной строке формата /catalog/[slug]?page=1. Я могу свободно перемещаться по страницам каталога, написав номер страницы ?page=1 в адресной строке. Я отслеживаю page и делаю запрос на сервер.
Проблема в том, что после перезагрузки страницы watch не успевает выполнить работу и данные не приходят. Затем я просто запускаю функцию prepare() и получаю сообщение об ошибке ERR_TOO_MANY_REDIRECTS от NavigateTo.
В чем может быть проблема? Я просто заменяю путь.
я пробовал но не помогло
watch(currentPage, () => {
prepare()},{immediate:true})
проблема в том NavigateTo
// check query on create
const currentPage = useState<number>(() => parseInt(query.page))
// watch when page change
watch(currentPage, () => {
prepare()
})
//change route and call api
const prepare =async (): Promise<void> => {
await navigateTo({
path: path,
query: {
page: currentPage.value,
}
}, {
redirectCode: 301,
replace: true
})
//call api
if (typeItem() && currentPage.value) {
loadMore(typeItem(), currentPage.value)
}
}
prepare()@Kyrony добавил скриншот
Основываясь на вашей файловой структуре, вы перемещаетесь по index.vue, а не по маршруту [id]. Это ваши намерения? Когда вы меняете запрос, вы не меняете маршрут, что означает, что вы переходите на ту же страницу.
@Kyrony Есть главная страница каталога, на ней пользователь выбирает категорию, у категории есть слаг. Страница-слаг содержит все элементы этой категории. Сам элемент находится на странице id. На странице [slug]/index я получаю сообщение об ошибке, если запускаю функцию prepare(). Код с этой страницы. Если я использую эту функцию в middleware, я получу ту же ошибку от nuxt, а не от браузера
Ответы 1
Проблема была решена путем использования router.replace из useRouter вместо NavigateTo. И сразу звонок watch(currentPage, () => { prepare()},{immediate:true})
const currentPage = useState<number>(() => 1)
if (query.page) currentPage.value=parseInt(query.page)
const prepare = async (): Promise<void> => {
await router.replace({
path: path,
query: {
page: currentPage.value,
}
});
if (typeItem() && currentPage.value) {
await loadMore(typeItem(), currentPage.value.toString())
}
}
watch(currentPage, () => {
prepare()
}, {immediate: true})
Вы наблюдаете за функцией подготовки, которая выполняет бесконечный цикл перехода к одному и тому же URL-адресу страницы. Пожалуйста, покажите свою файловую структуру, и я напишу решение, которое будет работать для вас!