vue3-路由缓存-路由切换页面不刷新问题

快乐的小青蛙。

已于 2023-05-30 18:56:20 修改

阅读量2.2k

点赞数 2

文章标签： vue.js 前端 javascript vue3

于 2023-05-30 18:54:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46002223/article/details/130954785

版权

文章探讨了在Vue.js应用中，当路由参数变化但页面接口未重新调用导致数据未渲染的两种解决方案。一种是通过添加key强制组件销毁重建，但这会影响所有组件。另一种是利用`onBeforeRouteUpdate`钩子函数，在路由更新前重新发送接口请求，确保使用最新的路由参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：路由在切换时候，路由参数可以变化，但是页面接口并没有调用，数据没有渲染
1.使用   添加key破坏复用机制 强制销毁重建 
存在问题：会强制将页面所有组件销毁，重新调用
<RouterView :key="$route.fullPath" /> 


2.使用
import { onBeforeRouteUpdate } from "vue-router";
// 目标：路由参数变化的时候 可以把分类数据接口重新发送
onBeforeRouteUpdate((to) => {

  // 会存在一个新问题  使用的路由参数不是最新的是滞后的可以通过to来获取
  //这里如果要使用路由中的值一定要取to中的，
 调用接口传递参数
})