Vue-Router无法跳转组件求助：搜索后页面无响应

核心问题定位 #

URL更新但组件未渲染，最常见原因是缺少路由视图容器，其次需排查组件路径、props接收逻辑是否存在问题。

分步解决 #

1. 确保App.vue中包含<router-view> #

路由切换后，Vue需要通过<router-view>标签作为容器渲染匹配的组件。检查你的App.vue模板，必须添加这个核心容器：

<template>
  <v-app>
    <!-- 路由组件会渲染在此位置 -->
    <router-view></router-view>
  </v-app>
</template>

如果没有该标签，即使路由跳转成功，组件也没有渲染入口。

2. 验证DisplayBooks组件路径正确性 #

确认router.js中导入组件的路径无误：

import DisplayBooks from '@/components/DisplayBooks.vue'

@在Vue项目中默认指向src目录，需保证src/components/DisplayBooks.vue文件真实存在，且文件名大小写与代码一致（部分操作系统区分大小写）。

3. 检查DisplayBooks组件的props接收逻辑 #

控制台能打印书籍数据，但如果组件未正确接收books props，可能导致渲染失败。在DisplayBooks.vue中显式声明props：

<script>
export default {
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  // 其他业务逻辑...
}
</script>

同时确保模板中使用books数据时无语法错误，比如遍历渲染的写法：

<template>
  <v-container>
    <v-row>
      <v-col v-for="book in books" :key="book.id" cols="12" sm="6" md="4">
        <h4>{{ book.volumeInfo.title }}</h4>
        <p>{{ book.volumeInfo.authors?.join(', ') }}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

4. 路由跳转逻辑优化 #

当前router.push的写法可简化为按路由名称跳转（更可靠，避免path拼写错误）：

router.push({
  name: 'displaybooks',
  props: { books }
})

无需同时指定path和name，按名称跳转时Vue会自动匹配对应路径。

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