Vue3中如何阻止组件重绘？vue-router场景修改URL不触发重绘

一、先解决组件重绘问题 #

默认情况下，Vue Router对于同一路由组件，仅当路由name或组件路径变化时才会重新渲染。如果修改URL（比如调整query参数）就触发组件重绘，大概率是你给<router-view>设置了key="$route.fullPath"——这会让Vue认为每次fullPath变化都是新组件，从而强制重绘。

解决方法：

• 去掉<router-view>的key属性，或者把key绑定为$route.name（确保同路由的name固定）：

<!-- 错误写法：fullPath变化就触发重绘 -->
<router-view :key="$route.fullPath"></router-view>

<!-- 正确写法：同路由参数变化不触发重绘 -->
<router-view></router-view>
<!-- 或用name作为key，适配多路由对应同一组件的场景 -->
<router-view :key="$route.name"></router-view>

调整后，修改query/params参数时，组件不会被重新创建，自然不会触发重绘。

二、优化参数监听逻辑 #

你当前监听fullPath的写法可以简化，直接监听$route.query更精准，同时避免JSON.parse的潜在报错：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(
  () => route.query.render, // 只监听render参数的变化
  (newRenderVal) => {
    // 先判断参数是否存在，再解析，防止JSON.parse(undefined)报错
    const needRefresh = newRenderVal ? !JSON.parse(newRenderVal) : true
    if (needRefresh) {
      refresh()
    }
  },
  { immediate: true } // 可选：组件初始化时自动执行一次逻辑
)

说明：

• 直接监听目标参数比监听fullPath更高效，只有当render参数变化时才触发回调
• 增加参数存在性判断，避免空值解析报错
• immediate: true可按需添加，确保组件初始化阶段就执行一次判断逻辑

补充：修改URL的正确姿势 #

用router.push/replace修改query时，只需传递更新后的query对象即可，无需重复指定路由路径，配合上述router-view的调整，不会触发组件重绘：

// 保留原有query参数，只修改render
router.push({
  query: {
    ...route.query,
    render: 'false'
  }
})

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