升级Nuxt依赖后router.push触发parentNode读取null错误求助

问题场景 #

升级项目依赖（当前版本：vitest@1.0.4、nuxt@3.9.1、nuxt-vite@0.3.5、@pinia/nuxt@0.5.1）后，点击按钮触发router.push({ path: getBaseRoute("next-route") })跳转页面时，抛出错误Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')。打印router确认其不为null，刷新页面后路由可正常跳转；移除router.push代码后错误消失，且能确认代码正常进入then流程。

报错代码片段：

const router = useRouter();

return await api
    .getByPostalCode(params)
    .then((response: PostalCodeResult) => {
        result.value = response;
        router.push({ path: getBaseRoute('next-route') });
    })
    .catch((error) => {
        return Promise.reject(error);
    });

可能原因 #

该错误本质是代码尝试访问已被销毁的DOM节点的parentNode属性。在Nuxt3场景下，通常是异步请求完成后，当前组件已被卸载（比如组件存在条件渲染逻辑，在请求过程中组件被隐藏/销毁），此时调用router.push会触发路由切换时的DOM操作，进而访问到已不存在的节点。

解决方案 #

1. 先确认组件挂载状态再执行路由跳转 #

在组件中添加挂载状态标记，调用router.push前检查组件是否仍处于挂载状态：

import { useRouter, onUnmounted, ref } from 'vue';

const router = useRouter();
const isMounted = ref(true);

onUnmounted(() => {
  isMounted.value = false;
});

// 异步请求逻辑
try {
  const response: PostalCodeResult = await api.getByPostalCode(params);
  result.value = response;
  // 仅在组件挂载时执行跳转
  if (isMounted.value) {
    router.push({ path: getBaseRoute('next-route') });
  }
} catch (error) {
  throw error;
}

2. 改用Nuxt官方推荐的navigateTo方法 #

navigateTo是Nuxt3专为路由跳转设计的工具函数，能更好适配Nuxt的生命周期和路由逻辑，替换router.push：

import { navigateTo } from 'nuxt/app';

// 在异步回调中替换为
navigateTo({ path: getBaseRoute('next-route') });

3. 统一异步代码风格，避免async/await与.then混用 #

原代码同时使用await和.then可能导致异步流程混乱，统一改成async/await写法，提升代码可读性与稳定性：

const router = useRouter();

try {
  const response: PostalCodeResult = await api.getByPostalCode(params);
  result.value = response;
  router.push({ path: getBaseRoute('next-route') });
} catch (error) {
  throw error;
}

4. 验证getBaseRoute的返回值 #

确认getBaseRoute('next-route')返回的是有效路由路径，若返回null或undefined，可能导致路由跳转异常，间接引发DOM相关错误。可以在跳转前打印路径值排查：

const targetPath = getBaseRoute('next-route');
console.log('Target route path:', targetPath);
// 确认路径有效后再跳转
if (targetPath) {
  router.push({ path: targetPath });
}

内容的提问来源于stack exchange，提问作者I try so hard but I cry harder