在使用 router-link 进行路由跳转时,A页面跳转到A页面,资源要重新加载吗
文章目录
- 问题
- 需求
- 情况1. 路由路径相同但参数不同
- 情况2. 路由路径和参数都相同
问题
今天在做路由跳转的时候,发现页面在跳转相同页面时好像资源重新加载了
需求
在使用 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>
综上所述,默认情况下,相同路由跳转时组件会复用,资源不会重新加载;但可以通过一些方法来强制重新加载组件。