Nuxt3路由跳转URL变更但页面不渲染，关联Swiper组件问题

问题根源 #

这个错误是因为自定义Swiper控制组件里的Teleport目标元素，在路由切换时随页面组件被销毁，但Swiper实例仍持有对它的引用，导致执行移除操作时找不到parentNode，进而阻塞了Nuxt的路由组件更新流程——这就是URL变了但页面内容没刷新的核心原因。

修复方案 #

方案1：把Teleport目标容器移到全局 #

将#swiper-control-left和#swiper-control-right放到app.vue或布局组件（比如layouts/default.vue）的根节点里，确保路由切换时这些容器不会被销毁：

<!-- app.vue -->
<template>
  <div>
    <!-- 全局存在的Teleport目标容器 -->
    <div id="swiper-control-left"></div>
    <div id="swiper-control-right"></div>
    <NuxtPage />
  </div>
</template>

方案2：给自定义组件添加路由监听与销毁逻辑 #

在Swiper控制组件里监听路由变化，离开当前页面时手动清理Teleport内容和Swiper引用：

<template>
  <!-- 用v-if控制Teleport的渲染，路由离开时销毁 -->
  <Teleport v-if="isActive" to="#swiper-control-left">
    <button @click="swiper.slidePrev()" class="slider-control-left">
      <sliderLeft />
    </button>
  </Teleport>
  <Teleport v-if="isActive" to="#swiper-control-right">
    <button @click="swiper.slideNext()" class="slider-control-right">
      <sliderRight />
    </button>
  </Teleport>
</template>
<script>
import { useSwiper } from "swiper/vue";
import { useRouter, onUnmounted, ref } from "vue";
import sliderLeft from "@/assets/icons/slider-left.svg";
import sliderRight from "@/assets/icons/slider-right.svg";

export default {
  components: { sliderLeft, sliderRight },
  setup() {
    const swiper = useSwiper();
    const router = useRouter();
    const isActive = ref(true);

    // 清理逻辑：关闭Teleport渲染，重置Swiper状态
    const cleanup = () => {
      isActive.value = false;
      if (swiper.value) {
        swiper.value.allowSlideNext = false;
        swiper.value.allowSlidePrev = false;
      }
    };

    // 监听路由，离开当前页面时执行清理
    const routeWatcher = router.afterEach((to, from) => {
      // 替换成当前页面的路由name（比如"index"）
      if (from.name === "your-page-name") cleanup();
    });

    // 组件卸载时移除监听并清理
    onUnmounted(() => {
      routeWatcher();
      cleanup();
    });

    return { swiper, isActive };
  },
};
</script>

方案3：改用Swiper官方导航组件 #

直接用Swiper内置的SwiperNavigation组件，完全规避自定义Teleport带来的问题：

<template>
  <Swiper :modules="[Navigation]">
    <SwiperSlide>你的幻灯片内容</SwiperSlide>
    <!-- 官方导航组件，无需自定义Teleport -->
    <SwiperNavigation />
  </Swiper>
</template>
<script>
import { Swiper, SwiperSlide, Navigation } from "swiper/vue";
import "swiper/css/navigation"; // 导入导航样式

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    return { Navigation };
  },
};
</script>

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