Vue3路由缓存问题

最新推荐文章于 2024-03-31 15:21:59 发布
最新推荐文章于 2024-03-31 15:21:59 发布
阅读量683 收藏 10
点赞数 18
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69223185/article/details/135297597
版权
问题场景

点击菜单切换页面，由于所有子菜单用的同一个组件（只是渲染数据不同），所以组件不会重新渲染（复用），请求不会发送，数据也就不会更新

产生原因

路由只有参数变化时，会复用组件实例

解决方案
  1. 给router-view添加key，实现强制更新

     2.使用beforeRouteUpdate导航钩子（监听路由变化的函数）

当路由变化时，将更新数据的函数放进去，只要路由发生变化就会调用函数更新数据

方案对比

对比两种方案，第一种是强制路由更新，这种方法简单粗暴，但对性能不友好，因为这样会使所有的组件全部更新，有一些可复用的也会被强制更新

例如下面的页面，圈住的不需要更新数据，但是使用第一种方法的话就会强制他一起更新，这样就会重复渲染相同的页面，比较耗性能

但是第二种方法对性能就很友好，beforeRouteUpdate检测到路由变化后，将需要更新数据对应的函数传入调用，可精细化控制

方案选择——总结

在意性能问题，选择onBeforeUpdate，精细化控制

不在意性能问题，选择key，简单粗暴

午安້໌ᮨ
关注
  • 18
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue路由缓存的几种实现方式小结
12-28
本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考，具体如下： 在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。 下面就简单介绍几种 vue ...
Vue动态路由缓存不相互影响的解决办法
10-17
主要介绍了Vue动态路由缓存不相互影响的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 路由缓存问题（三种方法）
团酱
08-17 4188
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
全网最细！Vue3实现路由缓存~
SiShen654的博客
11-26 2685
这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个。需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂挂载渲染。因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存。这个是 Vue3 的写法，不适用与 Vue2。在根组件 App.vue 中引入进来。
vue 使用 keep-alive 进行组件缓存方法详解(组件不缓存问题解决)
最新发布
RealizeInnerSelf丶
03-31 681
讲一些 keep-alive 的使用和应用场景
解决vue项目三级菜单路由无法缓存问题
sweet202005的博客
08-09 1741
在vue项目开发过程中，肯定会遇到标签栏功能，有标签栏大概率就会遇到一些页面缓存问题。一般路由缓存会用到keep-alive。
vue3 + vue-router + keep-alive缓存页面
jugt的博客
11-22 1684
1.一开始直接用meta.keepAlive的值判断是否需要缓存，导致从列表进入详情，再从详情返回列表的时候是对的，再从列表返回首页，再从首页进入列表就读取缓存不更新了。2.使用keep-alive的include属性解决1中的问题。但是明明细逻辑里已经把要缓存的name加入到缓存列表中了，就是不生效。3.在要缓存的组件中，加入name属性解决2中的问题。
【Vue】缓存数据的方式归纳
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-13 1万+
vue缓存数据方式
vue中使用动态路由的方式，以及路由不缓存的几种原因。
m0_66743830的博客
02-20 2327
vue组件配置动态缓存方式，以及组件不缓存可能原因。
vue spa应用中的路由缓存问题与解决方案
10-16
主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue路由缓存清除在main.js中的设置
12-13
/* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp...
vue3的keep-alive返回没有缓存的原因
weixin_43809477的博客
03-24 2240
vue3的keep-alive返回没有缓存的原因
vue3-路由缓存-路由切换页面不刷新问题
weixin_46002223的博客
05-30 1733
【代码】vue3-路由切换页面不刷新问题。
Vue3---什么是路由缓存问题
weixin_52053631的博客
07-08 1456
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。：1. 让组件实例不复用，强制销毁重建 2. 监听路由变化，变化之后执行数据更新操作。key也可以用于强制替换一个元素/组件而不是复用它。以当前路由完整路径为key的值，给router-view组件绑定。：一级分类的切换正好满足上面的条件，组件实例复用，
VUE工程的keep-alive缓存机制（全部缓存、部分缓存、定向缓存）
happy81997的博客
12-02 2770
目录 应用场景 解决思路 一、缓存所有页面 二、缓存部分页面 三、页面缓存了，有的功能需要再进入后，仍然重新执行的怎么办 四、执行前进刷新，后退时候缓存 五、页面B进入页面A需要缓存，页面C进入页面A不需要缓存 应用场景 1、vue工程，很多时候希望页面不管怎么跳转，返回时候，页面都能保持之前的操作状态， 2、页面跳转不用每次都执行mounted，特别很多请求数据时...
vue3动态路由
热门推荐
m0_46978096的博客
11-25 1万+
基本的思路： 拿到路由数据 ---------》 遍历路由数据通过router.addRoute一个个的添加，同时将路由数据缓存起来 -----------》 当页面刷新时，从缓存里拿出路由数据再重新添加，同时配合路由守卫来跳页面 当页面刷新后，即使你动态路由添加上去了，也能通过getRoutes拿到，但是刷新页面时的跳转会有问题，提示你该路由不存在之类的，这时要在路由守卫里通过router.push来跳转，这样就可以了(还是会提示错误但不影响使用) 第一次尝试做动态路由，如果有更好的方法实现，希望能评论告
vue3路由缓存组件状态以及设置转场动画
逆风优雅的博客
05-28 2328
与vue2组件状态缓存 <div id="app"> <keep-alive> <router-view /> </keep-alive> </div> 不一致。 vue3使用上面这种组件缓存方式不会生效。 vue3组件缓存的方式为： <router-view v-slot="{ Component }"> <!-- <transition name="fade
vue3页面缓存keep-alive
MadSnail00的博客
12-06 1520
页面缓存，keep-alive，include未生效
vue3动态路由缓存
08-07
Vue 3中，可以通过 `<keep-alive>` 组件来实现动态路由的缓存。`<keep-alive>` 组件可以包裹动态路由的组件，使其在组件切换时保留状态，而不会被销毁和重新创建。 以下是一个示例： ```vue <template> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"></component> </keep-alive> </router-view> </template> ``` 在上述示例中，`<router-view>` 是用于渲染动态路由的容器。通过使用 `v-slot` 来获取到当前动态路由的组件。 然后，我们将 `<keep-alive>` 组件包裹在 `<router-view>` 内部，这样就可以实现对动态路由组件的缓存。 需要注意的是，为了让 `<keep-alive>` 正常工作，每个动态路由组件都需要提供一个唯一的 `key` 属性。这样 Vue 才能正确地识别并缓存不同的组件。 例如，在路由配置中可以这样设置： ```javascript const routes = [ { path: '/example', name: 'Example', component: () => import('./Example.vue'), meta: { keepAlive: true // 设置该路由需要缓存 } }, // 其他路由配置... ] ``` 在上述示例中，我们通过 `meta` 字段设置了一个 `keepAlive` 属性，并将其设为 `true`，表示该路由需要缓存。 然后，在动态路由组件的生命周期钩子函数中，可以根据需要进行一些操作，例如在 `created` 钩子函数中可以进行一些初始化操作。 这样，当切换到该动态路由时，组件会被缓存起来，再次切换到该路由时会直接使用缓存的组件，而不是重新创建。 希望以上信息对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值