公司做网站建设济宁网站建设排行

问题

今天在做路由跳转的时候，发现页面在跳转相同页面时好像资源重新加载了

需求

在使用 router-link 从 A 页面跳转到 A 页面时，资源是否重新加载取决于路由配置和组件的使用情况：

情况1. 路由路径相同但参数不同

当使用 router-link 跳转到相同的路由路径，但携带不同的参数时，默认情况下组件实例会被复用，组件不会重新创建，生命周期钩子函数（如 created、mounted 等）不会再次触发，不过路由参数的变化可以通过 watch 监听 $route 对象来响应。

<template><div><!-- 跳转到相同路由但参数不同 --><router-link :to="{ name: 'A', params: { id: 1 } }">跳转到 A 页面（id=1）</router-link><router-link :to="{ name: 'A', params: { id: 2 } }">跳转到 A 页面（id=2）</router-link></div>
</template><script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';const route = useRoute();// 监听路由参数变化
watch(() => route.params, (newParams, oldParams) => {if (newParams.id !== oldParams.id) {// 处理参数变化console.log('路由参数变化，新的 id 是：', newParams.id);}
}, { deep: true });
</script>

情况2. 路由路径和参数都相同

当使用 router-link 跳转到相同的路由路径且携带相同的参数时，Vue Router 不会触发任何路由跳转，页面不会有任何变化，也就不会重新加载资源。
3. 强制重新加载组件
如果你希望在路由路径相同的情况下也重新加载组件，可以通过以下几种方式实现：
方法一：使用 :key 绑定路由参数
在路由组件上绑定一个唯一的 key，当路由参数变化时，key 也会变化，Vue 会认为这是一个新的组件实例，从而重新创建组件。

<template><router-view :key="$route.fullPath"></router-view>
</template>

方法二：监听 $route 变化并手动刷新组件
在组件中监听 $route 的变化，当路由变化时，手动重置组件的数据或调用初始化方法。

<template><div><!-- 组件内容 --></div>
</template><script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';const route = useRoute();watch(() => route, (newRoute, oldRoute) => {if (newRoute.path === oldRoute.path) {// 手动刷新组件console.log('路由未变化，但手动刷新组件');// 可以在这里调用初始化方法}
}, { deep: true });
</script>

综上所述，默认情况下，相同路由跳转时组件会复用，资源不会重新加载；但可以通过一些方法来强制重新加载组件。