当前位置: 首页 > article >正文

在使用 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>

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


http://www.kler.cn/a/576205.html

相关文章:

  • 物联网-铁路局“管理工区一张图”实现方案
  • xxx **5. 物理安全** 详细解读
  • mybatis报错org/apache/commons/lang3/tuple/Pair] with root cause
  • React基础之Redux
  • wx122基于ssm+vue+uniapp的食堂线上预约点餐系统小程序
  • 【Python机器学习】1.7. 逻辑回归理论(进阶):多维度(因子)逻辑回归问题、决策边界、交叉熵损失函数、最小化损失函数
  • 26-小迪安全-模块引用,mvc框架,渲染,数据联动0-rce安全
  • go切片定义和初始化
  • VUE2表单检验及提示的消除
  • 迷你世界脚本自定义UI接口:Customui
  • dify中使用NL2SQL
  • 更新Vim使其支持系统剪切板
  • 探秘沃尔什-哈达玛变换(WHT)原理
  • 【蓝桥杯】每天一题,理解逻辑(3/90)【Leetcode 快乐数】
  • 初识Qt · 信号与槽 · 基础知识
  • K8s 1.27.1 实战系列(四)验证集群及应用部署测试
  • Redis 中配置账号密码是通过设置 `requirepass` 参数来实现
  • 解决VMWare无法打开虚拟机——内部错误
  • NewStar CTF week3 web wp
  • 【算法系列】桶排序算法介绍及实现