vue3 实现routerview缓存

最新推荐文章于 2025-03-20 21:04:54 发布
原创 最新推荐文章于 2025-03-20 21:04:54 发布 · 692 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端框架 #vue.js #前端

这段代码展示了在Vue路由器中如何使用<router-view>配合<keep-alive>进行组件缓存，特别是当include属性设置为home时，home组件将在切换时不被重新渲染，提高应用性能。include值可以是多个组件名，用逗号分隔。

直接上代码

<router-view v-slot="{Component}">
    
    <keep-alive include="home">

      <component :is="Component" :key="$route.path" />

    </keep-alive>

  </router-view>

include 中是要缓存的组件名称，字符串类型，如有多少个 ' , '逗号分隔

【前端之Vue3路由机制router】
weixin_44666786的博客
07-26 1389
Vue3路由机制router 传参、守卫、重定向.....
Vue3除了keep-alive，还有哪些页面缓存的实现方案
chengbo_eva的博客
07-22 1288
Vue3除了keep-alive，还有哪些页面缓存的实现方案
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
12-07
在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时 便可以派上用场了。 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。 PS： 与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。 1. keep-alive的基础使用 最基础的一般是结合动态组件去使用： <keep
vue3 实现路由缓存
qq_67572731的博客
09-12 880
【代码】vue3 实现路由缓存。
vue3 路由缓存问题（三种方法）
团酱
08-17 5662
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
vue3 给缓存组件
weixin_43136717的博客
11-02 728
vue 缓存组件
vue页面路由缓存的一种方法
四岁爱上了她的博客
03-28 1351
从 名片查询页面进入到名片图表或着名片折线图表页面，返回的名片查询页面是不需要刷新的，但是从其它页面进来是需要刷新的。
vue3中routerview
03-31
### Vue3 中 RouterView 的使用方法 `<RouterView>` 是 Vue Router 提供的一个内置组件，用于渲染当前匹配到的路由对应的组件。它通常被放置在父级组件中，作为动态加载子组件的位置。 #### 基本用法 在一个典型的...
vue3中RouterView是什么
最新发布
06-26
### ### Vue3 中 `RouterView` 的作用和使用方式 `RouterView` 是 Vue Router 提供的一个组件，用于在 Vue 应用中动态渲染路由匹配的组件。它是实现单页应用（SPA）中页面切换的核心机制。 #### 作用 - **动态...
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
01-18
刚开始使用的方法是：关闭导航标签，直接调用对应的页面的$destory()方法，OK，可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是遇到个问题： 该页面将不再被缓存，也就是说切换导航tab时，页面将不断的...
vue3中的routerview标签
04-23
### Vue3 中 `RouterView` 的使用方法 在 Vue3 中，`<router-view>` 是一个非常重要的组件，用于渲染匹配到的路由对应的组件。它是 vue-router 提供的核心功能之一，负责根据当前路径动态加载相应的页面内容。 ###...
vue3中如何缓存路由组件
weixin_53541596的博客
03-20 2230
vue3中如何缓存路由组件
vue 路由缓存
shidouyu的专栏
12-12 1585
使用两个 router-view 标签分别作为缓存和不缓存的路由出口在路由配置的时候只需要给要缓存的页面加上 meta 属性然后添加 keepAlive 属性设置为 true 即可。同样直接用 keep-alive 标签包裹 router-view 标签然后使用 include 指定需要缓存的页面的 name 名称。直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了。注意是缓存页面的 name 名称而不是缓存页面路由的 name 名称。
KeepAlive与RouterView缓存
pscool的博客
12-15 1243
'---【ChatDetail组件】取消激活---''---【ChatDetail组件】激活---''---【ChatDetail组件】创建---''---【ChatDetail组件】销毁---''【Home组件】创建''【Home组件】销毁''【Chat组件】创建''【Chat组件】销毁'
vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate
qq_45811054的博客
05-30 5434
vue3-解决路由缓存问题：方案一：使用key；方案二：使用onBeforeRouteUpdate 当用vue3开发页面的时候，需要对不同页面的组件进行路由跳转，相同的组件实例将会被复用。因为这些路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。
Vue3路由缓存问题解决
rqz__的博客
05-17 1513
使用带有参数的路由时需要注意的是，当用户从/users/johnny导航到/users/jolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
Vue 使用 ＜keep-alive include＞ 实现多级 ＜router-view＞ 缓存，无限层次缓存
热门推荐
cimo的博客
11-09 1万+
使用 <keep-alive> 实现缓存目前主流的有两种方法 方法一： 在路由元信息中添加缓存标识： { path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json') }, 使用 v-if 判断是否缓存 <keep-alive> <router-v
Vue路由组件缓存
YJH15888673903的博客
05-11 166
Vue缓存路由组件
Vue3项目解决路由缓存问题---让组件实例不复用，强制销毁重建
听海边涛声
05-28 915
Vue3项目解决路由缓存问题---让组件实例不复用，强制销毁重建
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值