【Vue3】路由缓存问题

于 2024-05-22 19:28:19 发布
阅读量233 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40874076/article/details/139127691
版权


问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新
解决问题的思路：
1.让组件实例不复用，强制销毁重建
2.监听路由变化，变化之后执行数据更新操作

方案一：给router-view添加key
以当前路由完整路径为key的值，给router-view组件绑定
在这里插入图片描述
方案二：使用beforeRouteUpdate导航钩子
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可
在这里插入图片描述

总结

1.路由缓存问题产生的原因是什么？

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

2.俩种方案都可以解决路由缓存问题，如何选择呢？

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

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

奔跑的小G
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue路由缓存的几种实现方式小结
12-28
本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考，具体如下： 在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。 下面就简单介绍几种 vue 路由缓存的几种方式。 1、全部缓存 <keep> <router></router> </keep> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了 2、缓存单个指定路由 <keep include=该路由的name名称> <router></router-view
vue spa应用中的路由缓存问题与解决方案
10-16
本文将详细讲解Vue中解决SPA路由缓存问题的方法。 首先，我们需要理解SPA中的路由缓存问题。当用户在SPA中前进和后退时，浏览器默认的行为是重新加载和渲染当前路由对应的组件，这会导致页面状态的丢失，比如滚动...
vue3.x版本中监听路由router变化
ECHO陈文的博客
03-04 1万+
在开发项目的时候，需要监听一下路由的变动，来触发某些操作，但是网上说的好多教程基本都是通过watch来监听，当然这个也可以解决我们的需求，今天主要来介绍一个新朋友 onBeforeRouteUpdate
【vue3】监听路由变化
热门推荐
坚信万物皆可切的切图仔
12-28 3万+
有时在页面刷新或者返回等操作时，想监听路由变化进行数据更新等操作。那么在vue3中怎么对路由进行监听呢？阿彬提供了这两种方法： onBeforeRouteUpdate路由守卫 import { useRouter,onBeforeRouteUpdate } from 'vue-router'; let router = useRouter() onBeforeRouteUpdate((to) => { // console.log('onBeforeRouteUpdate',to
vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate
qq_45811054的博客
05-30 4762
vue3-解决路由缓存问题：方案一：使用key；方案二：使用onBeforeRouteUpdate 当用vue3开发页面的时候，需要对不同页面的组件进行路由跳转，相同的组件实例将会被复用。因为这些路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。
Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate
最新发布
northcastle的博客
01-05 4643
vue3 中的组件内的路由守卫的 组合式API ，onBeforeRouteLeave 和 onBeforeRouteUpdate 的基本使用演示
Vue动态路由缓存不相互影响的解决办法
10-17
主要介绍了Vue动态路由缓存不相互影响的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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...
使用onBeforeRouteUpdate解决路由缓存问题
m0_51557131的博客
06-30 631
点击标题跳转到新页面，如果标题的位置需要向下滚动才可以找到，页面停留的位置不在顶部，那么新跳转的页面位置和之前的位置一样。，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。路由只有参数变化时，会复用组件实例.在回调中执行需要数据更新的业务逻辑即可。beforeRouteUpdate钩子函数可以在每次路由更新之前执行。开发页面的时候，需要对不同页面的组件进行路由跳转，
关于beforeRouteUpdate
hsany330的专栏
01-12 871
下面的路由指向的其实是同一个传递不同参数的路径,只不过是传递的参数不同,拦截路由的路由文件里面是同一个配置 //路由标签 <router-link to="/detail/detail-item/1" tag="span">商品1</router-link>| <router-link to="/detail/detail-item/2" tag="span">商品2</router-link>| //路由文件 { na
vue3 路由缓存问题（三种方法）
团酱
08-17 4541
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
vue3语法糖
qq_53436617的博客
06-28 355
语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。// 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用。// 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据。4, 在setup/语法糖中使用组件路由守卫。//在setup/语法糖中调用路由守卫。
Vue3监听路由变化
fyonecon
07-21 2554
Vue3监听路由变化，onBeforeRouteUpdate
vue3实现路由缓存
weixin_43432689的博客
05-10 6752
vue3实现路由缓存
vue3 + vite 监听路由
m0_50080847的博客
12-02 567
1. watch监听 import { watch} from 'vue' import {useRouter} from 'vue-router' let router = useRouter() watch(() =>router.currentRoute._value,(m,n)=> { console.log('watch',m) },{ immediate...
【vue-router源码】十一、onBeforeRouteLeave、onBeforeRouteUpdate源码分析
MAXLZ的博客
06-12 7479
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将分析onBeforeRouteLeave、onBeforeRouteUpdate的实现。
全网最细！Vue3实现路由缓存~
SiShen654的博客
11-26 3053
这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个。需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂挂载渲染。因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存。这个是 Vue3 的写法，不适用与 Vue2。在根组件 App.vue 中引入进来。
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、付费专栏及课程。

余额充值