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,简单粗暴

相关推荐
Rainbow_Pearl3 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心40 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript