Vue 3单页应用搜索结果路由跳转异常问题排查与修复

1. 错误原因 #

核心问题出在Vue Router的组件复用机制：
当从首页/top-rated页面跳转到电影详情页时，Router会销毁旧页面组件并创建新的MovieDetailsView组件，组件的created/mounted等初始化钩子会正常触发，从而加载对应电影的数据。
但如果已经处于/movie/:id页面，点击搜索结果跳转到另一个电影详情页时，Router发现目标路由对应的组件仍是MovieDetailsView，会直接复用现有组件，不会重新触发初始化钩子。若你的MovieDetailsView仅在初始化钩子中加载电影数据，就会导致新的电影ID无法触发数据更新，看起来像是没有完成跳转。

补充：TopBar中搜索结果容器div.search-results绑定的@click="isSearch = false"会触发事件冒泡，但这不是跳转失败的核心原因，仅会导致搜索结果面板关闭，路由跳转本身是执行了的。

2. 可靠修复方式 #

方案一：监听路由参数变化（推荐，性能最优） #

在MovieDetailsView组件中监听路由参数id的变化，参数更新时重新加载电影数据。

选项式API写法：

// src/views/MovieDetailsView.vue
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import env from '../env';

export default defineComponent({
  name: 'MovieDetailsView',
  data() {
    return {
      movie: null
    };
  },
  watch: {
    // 监听路由id参数变化
    '$route.params.id'(newId) {
      this.fetchMovieDetails(newId);
    }
  },
  created() {
    // 初始加载数据
    this.fetchMovieDetails(this.$route.params.id);
  },
  methods: {
    async fetchMovieDetails(movieId: string) {
      try {
        const response = await axios.get(`${env.api_url}/movie/${movieId}?api_key=${env.api_key}`);
        this.movie = response.data;
      } catch (err) {
        console.error(err);
      }
    }
  }
});
</script>

组合式API写法：

// src/views/MovieDetailsView.vue
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import env from '../env';

export default defineComponent({
  name: 'MovieDetailsView',
  setup() {
    const route = useRoute();
    const movie = ref(null);

    const fetchMovieDetails = async (movieId: string) => {
      try {
        const response = await axios.get(`${env.api_url}/movie/${movieId}?api_key=${env.api_key}`);
        movie.value = response.data;
      } catch (err) {
        console.error(err);
      }
    };

    // 初始加载
    fetchMovieDetails(route.params.id as string);

    // 监听id参数变化
    watch(() => route.params.id, (newId) => {
      if (newId) {
        fetchMovieDetails(newId as string);
      }
    });

    return { movie };
  }
});
</script>

方案二：强制路由组件重建（简单粗暴，适合快速验证） #

在放置<router-view>的父组件（通常是App.vue）中，给<router-view>添加key属性，让Router每次路由变化时都重建组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <TopBar />
    <!-- 添加key属性，值为路由完整路径 -->
    <router-view :key="$route.fullPath" />
  </div>
</template>

这种方式会让所有路由切换都销毁重建组件，虽然能解决问题，但会带来轻微性能开销，适合快速验证问题，长期来看推荐方案一。

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