使用Vue组合式API调用router.push报错：Node.insertBefore异常

问题描述 #

使用Vue组合式API时，尝试通过router.push({ path: '/notfound' })将用户路由到404页面，控制台会抛出错误：

DOMException: Node.insertBefore: Child to insert before is not a child of this node

但通过<RouterLink>组件进行跳转时完全正常。

相关代码 #

CountryView.vue中的跳转逻辑 #

<template>
.. (所有.vue模板均有根节点，因此这不是问题)
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/notfound' });
</script>

路由配置（router/index.js） #

{
    path: '/notfound',
    name: 'NotFound',
    component: NotFound,
    meta: {
        scrollPos: {
            top: 0,
            left: 0,
        },
    },
},

解决方案 #

将路由跳转逻辑延迟到组件挂载完成后执行，比如使用onMounted生命周期钩子：

<script setup>
import { useRouter, onMounted } from 'vue';
const router = useRouter();

onMounted(() => {
  router.push({ path: '/notfound' });
});
</script>

或者使用nextTick确保DOM更新完成后再跳转：

<script setup>
import { useRouter, nextTick } from 'vue';
const router = useRouter();

nextTick(() => {
  router.push({ path: '/notfound' });
});
</script>

原因分析 #

直接在<script setup>的顶层作用域调用router.push，会在组件实例还未完成DOM挂载、Vue的DOM更新流程还在进行时触发路由跳转。此时DOM处于不稳定状态，路由切换时的DOM操作就会出现节点插入异常。而<RouterLink>是通过用户交互触发跳转，此时组件已经完成挂载，DOM状态稳定，因此不会出现该错误。

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