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以实参传给获取数据接口的函数,获得最新的数据
})
优点:精细化,不会损耗太多的性能。
缺点:理解,书写比较复杂。
大家有问题可以评论哈!!!