Vue Router 4点击嵌套路由链接页面不更新问题求助

问题原因 #

这是Vue Router的默认优化行为：当路由名称相同仅参数变化时，为了提升性能会复用现有组件实例，不会触发组件的挂载/卸载钩子，导致你看不到组件更新；同时如果组件未监听参数变化，路由跳转的状态也无法同步到视图上。

解决方法 #

1. 强制刷新路由组件（最简单直接） #

在父组件NoteListPage.vue的<router-view>上绑定唯一key，用路由完整路径或目标参数作为标识，这样每次参数变化时都会重新创建组件实例：

<!-- NoteListPage.vue 中的 router-view 代码 -->
<router-view :key="$route.fullPath" />

或者更精准地仅用identifier参数作为key：

<router-view :key="$route.params.identifier" />

这种方式会让router-view随参数变化重新渲染NotePage组件，直接同步URL和视图内容。

2. 在NotePage组件内监听路由参数变化 #

如果想保留组件复用的性能优势，可以在NotePage.vue中手动监听参数变化，触发数据更新：

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 监听identifier参数变化，重新加载对应笔记数据
watch(
  () => route.params.identifier,
  (newId) => {
    // 替换为你的笔记数据获取逻辑
    // 例如：loadNoteDetail(newId)
  },
  { immediate: true } // 确保组件初始化时也执行一次
)
</script>

3. 检查递归组件的Props定义（辅助排查） #

确认NoteChildren.vue正确定义了Props，避免因参数传递错误导致路由跳转异常：

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  identifier: {
    type: String,
    required: true
  },
  children: {
    type: Array,
    default: () => []
  }
})
</script>

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