Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决

已于 2024-06-20 15:50:20 修改
阅读量1.5k 收藏 3
点赞数 2
文章标签： vue.js
于 2024-03-14 10:58:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/limmt2020/article/details/136701783
版权
本文介绍了如何在Vue3的多路由场景下，利用keep-alive缓存功能，针对同一组件实现不同操作（关闭时清除缓存，切换时不清除），同时利用组件名称的路由名称区别，确保编辑和新建页面的复用

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

Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决

因为写了自制tab页面，需要实现关闭tab页面时清除缓存，切换tab页面时不清除缓存，新增和编辑复用了同一个页面

vue3写法路由：

<router-view v-slot="{ Component }">
      <div class="app_container">
        <transition name="fade-transform" mode=
最低0.47元/天 解锁文章
limit for me
关注
Vue3多路由指向同一组件 实现keep-alive缓存页面的解决方案
u013553807的博客
01-05 2351
需求：十几个路由使用的组件是同一个，从一个页面到另一个页面或者其他页面的时候，让之前输入的数据还存在。
Vue3-不同的链接对应同一个页面展示不同内容
敲厉害的燕宝的博客
03-24 1711
的值来加载不同的内容。当访问不同的网址时，Vue Router会根据路由路径中的参数值来加载相应的内容，从而实现在同一页面展示不同的内容。是动态的路由参数，可以是任何值。在这个示例中，路由路径被定义为。
Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决方案
weixin_45815557的博客
05-25 2090
多路由指向同一组件 实现keep-alive缓存页面
vue3中如何缓存路由组件
最新发布
weixin_53541596的博客
03-20 1481
vue3中如何缓存路由组件
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
wjlhanhan的博客
05-26 4036
为什么要这么写，因为主要原因就是改个name的嘛，component.type放的是该组件对象，不能直接改，两个component.type所指向的对象是同一个，所以用一个新对象来。以为解决了，结果报错，报啥错就不说了，我觉得应该是vue用那个弱引用map把组件对象当作key，存了一个其他数据，对象变了就取不到该数据了。其中 visitedViewPaths 是你自己的需要缓存的name列表，现在组件名字由你控制了，就已经解决了。以为没法解决了，结果百度到了一个方法完美解决。总算是解决了这个疑难问题哇。
vue3 组件，路由，KeepAlive
qiulei_21的专栏
04-28 504
共解决三个问题，详细参见文中所述。
vue 如何实现多个路由共用同一个页面组件
weixin_48975022的博客
04-23 4855
那么它会触发哪几个钩子函数呢？当多个路由公用同一个组件时，会进行组件复用，只会更新数据而不会重新挂载组件实例。那么它会触发哪几个钩子函数呢？我们可以看出，当切换路由时，由于组件复用，mounted之前的钩子函数都不再复用，因此如果你是在mounted中或者之前获取数据的，解决办法如下：1、使用路由的onBeforeRouteLeave钩子函数我们再次切换路由进行打印我们发现，该钩子函数是会被触发的， 因此你可以选择在此处进行获取数据2、使用路由的key属性。
vue里如何主动销毁keep-alive缓存的组件
10-17
在Vue.js框架中，`keep-alive`是用于缓存组件状态的一个功能，它可以保持组件状态，避免重新渲染，提高应用性能。然而，在某些场景下，我们需要在组件不再可见时主动销毁它，以避免内存泄漏或资源浪费。本文将详细...
vue 使某个组件不被 keep-alive 缓存的方法
10-17
在Vue.js中，`keep-alive`组件是一个特殊类型的组件，用于缓存其内部的组件实例，以便在导航之间保持组件的状态。这在构建复杂的单页应用时非常有用，可以提高用户体验，因为当用户返回到先前访问的路由时，之前的...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
解决vue多个路由共用一个页面的问题
08-27
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
不同路由对应同一组件页面
start_XUEBA的博客
05-07 1361
当不同路由对应同一组件页面时会发生再次进入页面时不再重新渲染的问题，整理一下解决办法
vue3 使用KeepAlive缓存，多个路由使用同一个组件
FenceRain的博客
06-29 1899
vue3 使用KeepAlive缓存，多个路由使用同一个组件
vue3缓存页面keep-alive+路由统一处理
m0_37840862的博客
10-15 6520
一、前言 当使用路由跳转到其他页面的时候，要求缓存当前页面，比如列表页面跳转到详情页面，需要缓存列表内容，并且保存滚动条位置，也有时候需要缓存的页面里面有部分内容不缓存，总之各种情况，下面就列举其中一些例子 vue2和vue3的使用方式是不一样的 created()方法和mounted()方法在页面初始化的时候会执行，如果缓存了页面，这两个方法都不会再执行，还有如果缓存了页面，vue2中的destroyed()和vue3中的unmounted()方法都不会执行 activated()方法在每次进入页面都会
vue2 多个路由指向同一个页面，修改页面name，TagsView/keep-alive
LDo135的博客
08-01 762
一个模块复制多个，功能基本相同，路由相同，不想复制页面，因为TagsView/keep-alive根据页面的name来缓存，name无法动态修改。title: '分析页'
vue 实现多个路由共用同一个页面组件
nnnooon的博客
01-09 3554
vue 实现多个路由共用同一个页面组件
【vue】实现多个路由共享同一个页面
coralime的博客
03-27 1万+
业务需求，多页面业务场景共用同一个模板，换不同路由地址请求，在同一个页面模板上返回不同数据。 [index.js] 设置多个路由指向同一页面，注意path和name必须具有唯一性 { path: '/column', name: 'column', component: () => import('../components/partycolumn/ColumnPage') }, { path: '/column1', name: 'colu
vue-router同一路由地址同页面切换无效解决
热门推荐
peng_guan的专栏
03-02 2万+
最近使用vue，同一个展示界面，只是根据不同的参数去在一个页面显示不同的信息。 试了第一次能触发进去，再点击不同参数相同路由就没反应。后来上网搜了下发现这位大神解决了这个问题。 沾过来只是方便遇到这个问题的人能及时解决这种问题。 http://blog.csdn.net/fungleo/article/details/54140095 vue-router 多个
解决vue3多路由跳转同一页面，网址更新页面不更新的问题
山委于鬼是为巍
04-10 775
解决vue3多路由跳转同一页面，网址更新页面不更新的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值