Vue3中,解决路由的缓存问题

603 阅读1分钟

1:引起路由缓存的原因:

由路由的组件复用机制引起。

2:产生的问题:

路由的path没有发生变化,路由对应的组件会直接被复用,从而点击别的组件的时候,别的组件的生命周期的钩子函数也不会执行,页面请求不到数据,不会发生变化。

3:解决方案:

a:在二级子路由的路由出口位置,加key属性。

######<router-view :key = "$route.fullPath"/>
优点:简单,不考虑性能时可用
缺点:每次点击新的子路由的时候都会触发生命周期函数,造成性能浪费。

b:运用vueRouter的 onBeforeRouteUpdate方法

第一步:引入 import { onBeforeRouteUpdate } from 'vue-router
第二步:onBeforeRouteUpdate((to) => { onBeforeRouteUpdate方法可以检测到哪个路由发生变化,to参数可以获取变化路由的信息 打印to,拿到最新数据的id,把id以实参传给获取数据接口的函数,获得最新的数据 })

解决路由缓存问题.png 优点:精细化,不会损耗太多的性能。 缺点:理解,书写比较复杂。

大家有问题可以评论哈!!!