Vue3路由切换出现页面未刷新问题的解决方案

// 路由配置示例
const routes = [
  {
    path: '/user/:id',
    component: UserProfile, // 相同组件用于不同参数
  }
];

<template>
  <div>
    <h1>用户资料 - {{ userId }}</h1>
    <!-- 用户资料内容 -->
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'UserProfile',
  setup() {
    const route = useRoute();
    const userId = ref(route.params.id);
    const userData = ref(null);
    
    // 获取用户数据的函数
    const fetchUserData = async (id) => {
      // 模拟API调用
      userData.value = await getUserById(id);
    };
    
    // 初始加载
    fetchUserData(userId.value);
    
    // 监听路由参数变化
    watch(() => route.params.id, (newId) => {
      userId.value = newId;
      fetchUserData(newId);
    });
    
    return {
      userId,
      userData
    };
  }
};
</script>

<!-- App.vue -->
<template>
  <div id="app">
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

<!-- 父组件中 -->
<template>
  <div>
    <router-view :key="$route.params.id"></router-view>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

export default {
  name: 'UserProfile',
  setup() {
    const route = useRoute();
    const userId = ref(route.params.id);
    const userData = ref(null);
    
    const fetchUserData = async (id) => {
      userData.value = await getUserById(id);
    };
    
    onMounted(() => {
      fetchUserData(userId.value);
    });
    
    onBeforeRouteUpdate(async (to, from, next) => {
      if (to.params.id !== from.params.id) {
        userId.value = to.params.id;
        await fetchUserData(to.params.id);
      }
      next();
    });
    
    return {
      userId,
      userData
    };
  }
};
</script>

// router.js
const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    meta: {
      forceRefresh: true // 自定义元信息
    }
  }
];

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.forceRefresh && to.path !== from.path) {
    // 执行强制刷新逻辑
    window.location.reload();
  } else {
    next();
  }
});