vue3路由按需缓存代码

已于 2022-08-24 10:18:12 修改
阅读量238 收藏
点赞数
分类专栏： vue 文章标签： vue.js
于 2022-08-13 11:07:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47438730/article/details/126316823
版权 
<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
    </keep-alive>
      <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
  </router-view>

小白鸽hc
关注
专栏目录
Vue3中使用component :is 加载组件
m0_51431448的博客
02-11 4万+
1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串 <template> <Child1 /> <Child2 /> <component :is="currentComp"></component> <el-button @click="compChange">切换组件</el-button> </template> <script> import
vue路由缓存的几种实现方式小结
12-28
本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考，具体如下： 在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。 下面就简单介绍几种 vue ...
Vue3缓存两种：路由缓存与Pinia状态缓存
m0_64469199的博客
04-09 873
单页应用中，最令人头疼的就是页面刷新或者回退时，数据丢失或重新加载的问题。本文以微小demo介绍两种缓存以应付Vue3项目中的绝大多数需要缓存的业务。
vue3 实现路由缓存
最新发布
qq_67572731的博客
09-12 479
【代码】vue3 实现路由缓存。
vue3 路由缓存页面
grr1640610995的博客
06-30 982
当前页面跳转到某个固定页面时缓存当前页面内容
VUE3-------路由缓存
weixin_45155276的博客
06-01 2726
VUE3-------路由缓存 文章目录VUE3-------路由缓存问题一、vue3中路由的使用setup中使用route或者是router实例二、解决问题1.使用watch监听解决路由缓存问题1.技术实现：2.代码落地：2.使用key去解决路由缓存问题1.使用：找到路由出口 加一个key属性2.基础原理3.使用方法选择 问题 路由缓存问题： path不变的情况下 vue-router会选择就地复用组件 导致组件不会重新渲染 钩子函数不会再次执行 ajax请求不会再次发起 提示：以下是本篇
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
本文重点介绍了Vue Router的几个关键功能：路由缓存、路由嵌套、路由守卫以及监听物理返回操作，这些都是在开发过程中常会遇到的需求。 路由缓存是指在用户跳转至不同的视图组件时，保持某些视图的状态，以提高用户...
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
10-17
另外，Vue Router 的缓存机制可能无法正确处理动态添加的路由，导致路由信息发生变化，如失去 `render` 方法或 `component` 属性，从而影响路由的正常工作。 从缓存中读取的路由可能丢失关键信息，如父路由的 `...
详解vue-template-admin三级路由无法缓存的解决方案
11-21
在开发基于Vue的管理模板，如vue-template-admin时，可能会遇到一个问题，即三级路由的组件无法被正确缓存。这个问题主要涉及Vue Router的`keep-alive`特性，以及如何处理组件的缓存策略。 `keep-alive` 是Vue ...
vue spa应用中的路由缓存问题与解决方案
10-16
除了`<keep-alive>`，Vue还提供了一些其他优化手段，如懒加载（路由按需加载）、异步组件、状态管理工具Vuex等，这些都可以帮助优化SPA的性能和用户体验。对于大型的SPA应用，合理地使用路由缓存和优化策略至关重要...
vue3 路由缓存问题（三种方法）
团酱
08-17 4981
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
vue3实现路由缓存
weixin_43432689的博客
05-10 6889
vue3实现路由缓存
vue3项目中解决路由缓存问题
m0_69605915的博客
08-23 2895
vue3项目中解决路由缓存问题
Vue3---什么是路由缓存问题
weixin_52053631的博客
07-08 1497
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。：1. 让组件实例不复用，强制销毁重建 2. 监听路由变化，变化之后执行数据更新操作。key也可以用于强制替换一个元素/组件而不是复用它。以当前路由完整路径为key的值，给router-view组件绑定。：一级分类的切换正好满足上面的条件，组件实例复用，
全网最细！Vue3实现路由缓存~
SiShen654的博客
11-26 3625
这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个。需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂挂载渲染。因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存。这个是 Vue3 的写法，不适用与 Vue2。在根组件 App.vue 中引入进来。
解决路由缓存问题 vue3
grow_的博客
01-04 1084
现存问题：由于路由的组件复用机制，当路由的路径path没有发生变化时，路由对应的组件会被直接复用，也就是生命周期钩子函数不再执行，请求也就不会再次发起。说明❓：根据不一样的场景要求使用不一样的技术方案，如果性能要求很高，第三种方案，如果不涉及性能问题，使用key简单粗暴，1）给`router-view` 添加key属性 ----------- `Layout/index.vue`> 解决思路：给`router-view` 加上key 值为每次路由切换的完整路径。说明❓：组件会被重新创建。
Vue3 _ 24. Vue 路由缓存 & 编程式导航
胖子胖子大胖子的博客
07-20 489
一、路由缓存 我们在以后使用 Vue 做系统的时候，难免会遇到表单，填写完成后，不小心点错了按钮跳到了另外一个页面，当你再切回来的时候，你会发现整个表单啥也没有了。 再或者是一个比较大的页面，如果每次进来都要加载一边，那这个十分浪费服务器资源。为了避免上面的那两种情况，这里我们引入一种东西，叫路由缓存 二、路由缓存的使用 我们在HelloRouter1.vue 中创建一个简单的 form 表单。 保存后我们来进行一次测试。 第一步：在两个input 框中随便输入点啥 第二步：现在切换.
【vue3.0】keep-alive 路由页面缓存
票票的博客
12-28 5129
前言 在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，是不需要重新加载的。 先简单介绍一下什么情况下会用到keep-alive 1，当使用路由跳转到其他页面的时候，要求缓存当前页面，比如在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查
vue3路由监听清除缓存
11-02
根据提供的引用内容，可以看出这是一个Vue.js的路由缓存管理的问题。在Vue.js中，可以通过keep-alive组件来实现路由缓存。而在路由缓存管理中，可以通过监听缓存列表的变化来判断是否需要销毁缓存实例。具体实现可以参考以下步骤： 1. 在Vue组件中引入mapState方法，将vuex中的keepAliveList映射到computed计算属性中。 2. 监听keepAliveList的变化，如果缓存列表中没有当前的路由或组件，则在缓存中销毁该实例。 3. 在销毁缓存实例时，可以采用两种方式：$destroy方法和include方法。其中，$destroy方法是摧毁树的节点，而include方法则是通过匹配路由名称来销毁缓存实例。 4. 如果采用$destroy方法无法销毁缓存实例，可以尝试使用include方法。 代码示例： ```javascript <template> <keep-alive :include="keepAliveList"> <router-view></router-view> </keep-alive> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ keepAliveList: state => state.utils.keepAliveList, }), }, watch: { keepAliveList(e) { let name = this.$options.name; if (e.indexOf(name) < 0) { this.$destroy(); } }, }, } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值