在使用-router-link-进行路由跳转时,A页面跳转到A页面,资源要重新加载吗
目录
在使用 router-link 进行路由跳转时，A页面跳转到A页面，资源要重新加载吗
问题
今天在做路由跳转的时候，发现页面在跳转相同页面时好像资源重新加载了
需求
在使用 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 不会触发任何路由跳转，页面不会有任何变化，也就不会重新加载资源。
- 强制重新加载组件
如果你希望在路由路径相同的情况下也重新加载组件，可以通过以下几种方式实现：
方法一：使用 :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>综上所述，默认情况下，相同路由跳转时组件会复用，资源不会重新加载；但可以通过一些方法来强制重新加载组件。