Vue3解决路由缓存问题

什么是路由缓存

响应路由参数的变化

使用带有参数的路由时需要注意的是,当用户从**/users/johnny** 导航到**/users/jolyne** 时,相同的组件实例将被重复使用 。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用

问题:一级分类的切换正好满足上面的条件,组件实例复用,导致分类数据无法更新

演示:

由上面两张图片可以看出我们切换了页面的分类,并且id也发生了变化,但是页面却还是一样的

解决问题的思路:1.让组件实例不复用,强制销毁重建 2.监听路由变化,变化之后执行数据更新操作

方案一:给router-view添加key

以当前路由完整路径为key的值,给router-view组件绑定

最常见的用例是与 v-for 结合:

复制代码
  <!-- 添加key 破坏复用机制 强制销毁重建 -->
  <RouterView :key="$route.path" />

也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用:

  • 在适当的时候触发组件的生命周期钩子
  • 触发过渡

代码:

复制代码
  <!-- 添加key 破坏复用机制 强制销毁重建 -->
  <RouterView :key="$route.path" />

这时我们就发现这两个不同的分类给我们展示了不同的页面

**弊端:**它把整个示例都销毁重建了,所以组件的所有请求都会重新发送这样就造成了一定的资源浪费(因为有一些数据可能是不需要改变的比如banner图,不管在哪个分类下展示的banner图都是一样的)

方案二:使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可

使用示例

javascript 复制代码
import { onBeforeRouteUpdate } from 'vue-router';
// 获取路由参数
const route = useRoute()
const routeId = route.params.id

const categoryData = ref({})
const getCategoryList = async (id = routeId) => {
    const res = await getCategory(id)
    console.log(res)
    categoryData.value = res.result
}

onMounted(() => {
    // 第一次调用的时候不用传递参数,让他使用默认的
    getCategoryList()
})

// 目标:路由参数发生变化时 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=>{
    console.log('路由发生变化了');
      // 存在问题:使用最新的路由参数请求最新的分类数据
//(从名字before可以看出是跳转之前所执行的,route.params.id有一定的滞后性,所以不能直接用route.params.id)
    console.log(to);
    getCategoryList(to.params.id)    
})

总结:

1.路由缓存问题产生的原因是什么?
路由只有参数变化时,会复用组件实例

2.俩种方案都可以解决路由缓存问题,如何选择呢?
在意性能问题,选择onBeforeUpdate,精细化控制不在意性能问题,选择key,简单粗暴

相关推荐
前端小巷子5 分钟前
深入理解TCP协议
前端·javascript·面试
万少6 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲20 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式