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

vue3前端开发-小兔鲜项目-路由缓存的更新解决办法

vue3前端开发-小兔鲜项目-路由缓存的更新解决办法!默认情况下,如果我们不想办法解决这个问题,vue3框架有个默认的约定,那就是,当仅仅是路由参数发生变化的时候,框架并不会更新整个模块的内容。但是我们现在需要看见的是,路由参数变化后,要刷新整个模块内的数据信息。为此,有两种解决思路。


1:第一种思路是,直接在路由标签里面加入一个参数。

  <!--这种方式,会重新刷新整个模块的生命周期,但是,我们仅仅是想实现部分内容的刷新,所以我们不用这个方式--><RouterView  :key="$route.fullPath"/>

借助于这个:key的绑定属性,来实现刷新更改整个模块内容的效果。

但是,我们仅仅是希望更新部分内容啊。所以这个方式我们不用它。


2:我们采用第二种思路。

调用一个钩子函数。

onBeforeRouteUpdate

import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to)=>{//把动态变化的路由参数值传递给函数getCagegoryData(to.params.id)
})
//加载banne

如图,我们给函数增加了一个参数。这个参数就是官方框架自带的,一个对象,它里面有那个路径的参数id

我们对应的也需要稍微的修改一下,之前的函数了。

const getCagegoryData = async (id = route.params.id) =>{// 如何在setup中获取路由参数 useRoute() -> route 等价于this.$routeconst res = await getCategoryAPI(id)categoryData.value = res.result
}

如图所示,代码参数里面,有一个默认值(不赋值的情况下,就是调用的那个默认值,)。如果赋值了,就是我们赋值的内容。向后面传递。

这样就可以确保,初始化操作,和后期的修改操作,都能渲染更新框架内的数据信息了。

相关文章:

  • Redisson常用的数据结构及应用场景
  • Typora笔记上传到CSDN
  • Ubuntu 24 PXE Server bios+uefi 自动化部署esxi 6 7 8
  • U盘损坏无法访问?解锁两大高效数据恢复秘籍
  • 大模型学习资源
  • [Mysql-DML数据操作语句]
  • Python酷库之旅-第三方库Pandas(048)
  • Docker Desktop安装(通俗易懂)
  • 017、Vue动态tag标签
  • 韦东山嵌入式linux系列-查询方式的按键驱动程序_编写框架
  • Android 开发中px、dpi 和 dp三个单位的介绍
  • 【Pytorch】cumsum的实现逻辑
  • Linux网络:传输层协议TCP(一)
  • 基于riscv64架构的Dayu800开发板的napi_demo开发介绍
  • MySQL大框架总结
  • Android开源项目规范总结
  • download使用浅析
  • Git同步原始仓库到Fork仓库中
  • IOS评论框不贴底(ios12新bug)
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • Vue组件定义
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 解析 Webpack中import、require、按需加载的执行过程
  • 精彩代码 vue.js
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 使用 Docker 部署 Spring Boot项目
  • 通过git安装npm私有模块
  • 微信公众号开发小记——5.python微信红包
  • 我与Jetbrains的这些年
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 异常机制详解
  • RDS-Mysql 物理备份恢复到本地数据库上
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • ​io --- 处理流的核心工具​
  • ​如何使用QGIS制作三维建筑
  • (07)Hive——窗口函数详解
  • (20050108)又读《平凡的世界》
  • (php伪随机数生成)[GWCTF 2019]枯燥的抽奖
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (附源码)计算机毕业设计大学生兼职系统
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (回溯) LeetCode 78. 子集
  • (接口封装)
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (十三)Flink SQL
  • (转)拼包函数及网络封包的异常处理(含代码)
  • (转载)Linux 多线程条件变量同步
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET Core 版本不支持的问题
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .net refrector
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NET开发不可不知、不可不用的辅助类(一)
  • .Net中的集合