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.$route
    const res = await getCategoryAPI(id)
    categoryData.value = res.result
}

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

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

相关推荐
上官花雨15 分钟前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu17 分钟前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人19 分钟前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹36 分钟前
socket连接封装
前端
qq_364371722 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森3 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象6 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥7 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森8 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy8 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html