Nuxt3使用navigateTo出现ERR_TOO_MANY_REDIRECTS问题求助

核心问题 #

1. 无限重定向循环：页面初始化时直接调用prepare()，不管当前URL的page参数是否正确都执行navigateTo，导致路由重复更新，触发ERR_TOO_MANY_REDIRECTS。
2. 初始数据加载失败：依赖watch触发数据请求，但默认配置下watch不会立即执行，即使添加immediate:true，也会被循环跳转打断，无法正常加载数据。

修复代码 #

// 从URL query初始化当前页码，添加默认值避免NaN
const currentPage = useState<number>(() => parseInt(query.page) || 1)

// 监听页码变化，仅当与URL参数不一致时更新路由并请求数据
watch(currentPage, async (newPage) => {
    // 先判断当前URL的page参数是否和新页码一致，避免重复跳转
    if (parseInt(query.page) !== newPage) {
        await navigateTo({
            path: path,
            query: { page: newPage }
        }, { replace: true })
    }
    // 直接触发数据请求
    if (typeItem() && newPage) {
        loadMore(typeItem(), newPage)
    }
}, { immediate: true }) // 立即执行一次，处理初始加载逻辑

关键优化点 #

• 阻断无效跳转：更新路由前先对比当前URL的page参数，仅当不一致时才执行navigateTo，彻底解决循环重定向问题。
• 强制初始触发：给watch配置immediate:true，页面初始化时自动执行一次回调，确保初始数据能正常加载。
• 整合逻辑：把路由更新和数据请求合并到watch回调中，避免重复调用导致的逻辑混乱。
• 容错处理：给parseInt(query.page)设置默认值1，防止地址栏无page参数时出现NaN异常。

内容的提问来源于stack exchange，提问作者Frallen