vue3项目路由跳转，地址改变了但是页面并没有变怎么解决

Question

有时会出现vue3项目路由跳转，地址改变了但是页面并没有变但是刷新又好了怎么解决，逻辑：从index.vue详情跳转到info.vue，info里有其他组件引入如表单，echarts，卡片列表
已经做了监听所有路由参数变化和 ，但是页面没有变化时监听的方法没有走，这行没有打印console.log('New:', newVal, 'Old:', oldVal);具体代码如下
index

<el-button size="small" link @click="handleInfo(scope.row, 'basic')">
                <template #icon>
                  <Message />
                </template>
                详情
</el-button>
// 跳转详情页
function handleInfo(row: any, name: string) {
  // 确保所有参数都是字符串类型
  const query = {
    deviceCode: String(row.deviceCode),
    name: String(name),
    deviceType: String(row.deviceType),
    communicationModeItemName: String(row.communicationModeItemName),
    deviceTypeId: String(row.deviceTypeId),
    Id: String(row.id),
  };

  // 使用 replace 而不是 push，避免历史记录堆积
  router.replace({
    path: "/info",
    query
  });
}

info

// 监听所有路由参数变化
watch(
  () => ({
    deviceCode: route.query.deviceCode,
    deviceTypeId: route.query.deviceTypeId,
    deviceType: route.query.deviceType,
    communicationModeItemName: route.query.communicationModeItemName,
    name: route.query.name
  }),
  // () => route.query,
  (newVal, oldVal) => {
    console.log('New:', newVal, 'Old:', oldVal);
    // 更新所有相关状态。重置数据
    resetFormAndReload(newVal);
    console.log('deviceCode updated:', deviceCode.value); // 检查是否更新
    if (newVal !== oldVal) {
      // 如果不同，使用$router.go(0)强制页面刷新
      // route.go(0);
    }
    // 重新加载数据
    nextTick(() => {
      console.log('Starting handleQuery...');
      handleQuery();
    });
  },
  // { immediate: true, deep: true }
  { immediate: true } // 无需 deep: true
);
const resetFormAndReload = (query) => {
  deviceCode.value = query.deviceCode as string || '';
  deviceTypeId.value = query.deviceTypeId as string || '';
  deviceType.value = query.deviceType as string || '';
  communicationModeItemName.value = query.communicationModeItemName as string || '';
  activeName.value = query.name as string || '';
  form.value = {} as DeviceForm;
  pageData.value = [];
  // nextTick(handleQuery);
};
// 返回列表
function goBack() {
  deviceCode.value = '';
  form.value = {} as DeviceForm;
  queryParams.value = {} as subDevicePage;
  router.push('/device/device');
}
HTML--------
el-tabs v-if="!isGatewayDevice" v-model="activeName" tab-position="top" style="padding: 10px; min-height: 400px">
        <el-tab-pane name="basic">
          <template #label>
            <span class="custom-tabs-label">
              <span>基本信息</span>
            </span>
          </template>
          <Basic :form="form" ref="basicFormRef" :key="$route.fullPath" />
        </el-tab-pane>
        <el-tab-pane name="runningStatus">
          <template #label>
            <span class="custom-tabs-label">
              <span>运行状态</span>
            </span>
          </template>
          <yun-xing-zhuang-tai :device-info="form.deviceInfo || []" :key="$route.fullPath" />
        </el-tab-pane>
        <el-tab-pane name="videoLive">
          <template #label>
            <span class="custom-tabs-label">
              <span>设备数据</span>
            </span>
          </template>
          <she-bei-shu-ju :device-info="form.deviceInfo || []" :create-time="form.createTime" :key="$route.fullPath" />
 </el-tab-pane>

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

问题分析

在 Vue 3 中，路由跳转后地址改变了但页面未更新的问题通常与以下几个方面有关：

1. key 的动态绑定：如果子组件的 key 是固定的，Vue 可能会复用组件实例，导致数据没有重新渲染。
2. watch 的监听机制：监听的路由参数可能没有正确触发更新逻辑。
3. 组件内部的状态管理：某些组件可能依赖于 props 或 data，需要确保这些状态被正确初始化或更新。

解决方案

以下是详细的解决方案步骤：

---

1. 确保 key 动态绑定

在 Vue 中，key 是一个特殊的属性，用于标识组件实例。当 key 发生变化时，Vue 会销毁旧实例并创建新实例，从而触发重新渲染。

在你的代码中，<el-tab-pane> 的 :key="$route.fullPath" 已经正确使用了动态绑定。这一步是必要的，确保每次路由变化时，组件都会重新初始化。

---

2. 优化 watch 的监听逻辑

当前的 watch 配置中，虽然启用了 immediate: true，但并未启用 deep: true。如果你的路由参数是嵌套对象或复杂结构，可能会导致监听不到变化。

建议：

• 启用 deep: true 来深度监听路由参数的变化。
• 在 watch 中明确处理每个参数的变化，确保逻辑正确。

修改后的代码如下：

watch(
  () => route.query, // 深度监听整个 query 对象
  (newVal, oldVal) => {
    console.log('New:', newVal, 'Old:', oldVal);
    if (!isEqual(newVal, oldVal)) { // 使用 lodash 的 isEqual 方法判断深层变化
      resetFormAndReload(newVal);
      nextTick(() => {
        console.log('Starting handleQuery...');
        handleQuery();
      });
    }
  },
  { immediate: true }
);

// 引入 lodash 的 isEqual 方法
import { isEqual } from 'lodash';

---

3. 确保组件状态被正确重置

在 resetFormAndReload 方法中，确保所有状态都被正确重置。同时，检查是否有异步操作（如 nextTick）影响了数据的更新。

---

4. 强制刷新页面（备用方案）

如果以上方法仍然无法解决问题，可以尝试通过 $forceUpdate 或 $router.go(0) 强制刷新页面。

示例代码：

if (!isEqual(newVal, oldVal)) {
  resetFormAndReload(newVal);
  nextTick(() => {
    console.log('Starting handleQuery...');
    handleQuery();
  });
  // 强制刷新页面
  router.replace({ path: '/info', query: newVal }); // 替换当前路由
}

---

5. 检查组件内部逻辑

确保 Basic、yun-xing-zhuang-tai 和 she-bei-shu-ju 组件能够正确接收 props 并更新内部状态。例如：

// Basic.vue
<script setup>
defineProps({
  form: Object,
});
</script>

---

修改后的完整代码片段

以下是修改后的关键代码片段：

// 监听路由参数变化
watch(
  () => route.query, // 深度监听整个 query 对象
  (newVal, oldVal) => {
    console.log('New:', newVal, 'Old:', oldVal);
    if (!isEqual(newVal, oldVal)) { // 使用 lodash 的 isEqual 方法判断深层变化
      resetFormAndReload(newVal);
      nextTick(() => {
        console.log('Starting handleQuery...');
        handleQuery();
      });
      // 强制刷新页面
      router.replace({ path: '/info', query: newVal }); // 替换当前路由
    }
  },
  { immediate: true }
);

// 重置表单和状态
const resetFormAndReload = (query) => {
  deviceCode.value = query.deviceCode || '';
  deviceTypeId.value = query.deviceTypeId || '';
  deviceType.value = query.deviceType || '';
  communicationModeItemName.value = query.communicationModeItemName || '';
  activeName.value = query.name || '';
  form.value = {} as DeviceForm;
  pageData.value = [];
};

---

总结

1. 确保 key 动态绑定，避免组件复用。
2. 启用 deep: true 深度监听路由参数。
3. 使用 isEqual 判断深层变化，确保监听逻辑正确。
4. 如果问题仍未解决，可以尝试强制刷新页面。
5. 检查组件内部逻辑，确保状态更新正确。

通过以上步骤，你应该能够解决路由跳转后页面未更新的问题。