-
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020-11-20 03:21:04这个功能通过keep-alive组件实现，keep-alive组件可以使被包含的组件保留状态，或避免重新渲染。 在routes.js中定义路由，在路由中定义元信息(meta字段)，需要缓存的页面就需要在meta对象中定义一个字段，这里设置... -
vue使用keep-alive实现数据缓存不刷新
2020-11-26 15:37:32其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-alive，然后对比了一下，在我认为，vuex和vuet是实现状态... -
解决vue keep-alive 数据更新的问题
2020-12-01 19:31:58当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。 当再次进入（前进或者后退）时，只触发activated。 *********************************** 这就... -
vue里如何主动销毁keep-alive缓存的组件
2020-12-03 18:18:14问题产生的背景 我们一个后台，在切换一些标签页的时候，是使用的 keep-alive 缓存的标签页，也使用了 include 属性来决定哪个...这个项目是基于一个开源 vue 后台框架：https://github.com/PanJiaChen/vue-element-ad -
vue-router-keep-alive-helper:Vue.js缓存自动管理插件，自动创建、销毁缓存页面-源码
2021-04-12 18:43:54当使用vue-router开发Vue.js的SPA项目时， <keep>总是用于缓存已路由的页面，有三个选项来管理其中的缓存树， include - Only components with matching names will be cached. exclude - Any component with a ... -
vue 使某个组件不被 keep-alive 缓存的方法
2020-12-11 07:56:28最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！ 分析问题 这是因为 keep-alive 将路由页面缓存，... -
Vue中 key keep-alive的实现原理
2020-10-18 00:08:40主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
vue keep-alive 动态删除组件缓存的例子
2020-12-13 17:08:34业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。 实现： 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候，更新...以上这篇vue keep-aliv -
Vue中keep-alive组件作用详解
2020-10-15 17:15:47主要为大家详细介绍了Vue中keep-alive组件的作用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 -
vue中keep-alive，include的缓存问题
2020-10-15 22:51:56主要介绍了vue中keep-alive，include的缓存问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 -
vue-router-helper-demo:使用vue-router-keep-alive-helper的示例代码-源码
2021-05-27 09:30:18vue-stack-router-demo 此Demo为应用 库的前端路由项目。 运行后查看vue dev-tool中即可观察到缓存中的Vue实例，安装。 演示视频地址 Project setup yarn install Compiles and hot-reloads for development yarn ... -
vue解决使用webpack打包后keep-alive不生效的方法
2021-01-21 12:45:56问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题： 路由如下： var menus = [ { path: '/user', name... -
解决vue单页使用keep-alive页面返回不刷新的问题
2020-12-29 02:57:08<keep>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方 <router></router> 把这段代码改成如下： <keep> ... -
vue使用keep-alive保持滚动条位置的实现方法
2020-10-17 04:51:52主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 -
浅析Vue项目中使用keep-Alive步骤
2020-10-18 07:45:26简单给大家介绍了Vue项目中使用keep-Alive步骤，在vue2.1.0之前，实现方式也给大家作了简单介绍，感兴趣的朋友跟随脚本之家小编一起看看吧 -
基于vue中keep-alive缓存问题的解决方法
2020-10-17 23:45:49今天小编就为大家分享一篇基于vue中keep-alive缓存问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
vue的keep-alive用法技巧
2020-10-16 13:56:26在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。 -
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020-10-15 12:24:28主要介绍了Vue中keep-alive 实现后退不刷新并保持滚动位置的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 -
详解Vue路由开启keep-alive时的注意点
2020-08-30 05:00:14主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下 -
Vue中keep-alive的两种应用方式
2020-11-20 03:18:59Vue中keep-alive的使用我总结的有两种方式应用： 首先简述一下keep-alive的作用，kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候，默认会销毁，当重新切换回来时又重新初始化。现在有需求切换回来... -
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2020-12-07 12:26:07在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时 <keep> 便可以派上用场了。 <keep> 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中... -
keep-alive不能缓存多层级路由菜单问题解决
2020-11-21 10:57:50目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 ... -
keep-alive vue的路由缓存及transition动画(keep-alive新方式include~)
2019-04-24 17:33:26尤其是h5制作的app，来回跳转的时候，有的地方需要做缓存，一来防止页面重复加载同样的数据造成服务器压力，二来防止页面重新加载造成卡顿，影响客户体验，今天，小闫就工作问题来帮助大家理解vue-router的缓存 ...展开全文以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）
在vue项目中，尤其是h5制作的app，来回跳转的时候，有的地方需要做缓存，一来防止页面重复加载同样的数据造成服务器压力，二来防止页面重新加载造成卡顿，影响客户体验，今天，小编就工作问题来帮助大家理解vue-router的缓存 - keep-alive
一、 <router-view>
- <router-view> 组件用于渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。
- <router-view> 组件有一个name属性，默认为default，渲染对应的路由配置中 components 下的相应组件。
//视图容器 <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> //路由配置 { path: '/main', components: Foo },{ path: '/', components: { default: Foo, a: Bar, b: Baz } }- 因为它也是个组件，所以可以配合 和 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>
<transition> <keep-alive> <router-view></router-view> </keep-alive> </transition>二、路由的router和route
vue-router中经常会操作的两个对象route和router
$route对象
$route对象指的是当前路由对象，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
**1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 **2.$route.params** 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 **3.$route.query** 一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有 $route.query.user == 1， 如果没有查询参数，则是个空对象。 **4.$route.hash** 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点 **5.$route.fullPath** 完成解析后的 URL，包含查询参数和 hash 的完整路径。 **6.$route.matched** 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 **7.$route.name 当前路径名字** **8.$route.meta 路由元信息$route对象
$router对象是全局路由的实例，是router构造方法的实例。主要是实现路由跳转使用。
//常用方法 this.$router.push('home'); this.$router.go(-1); this.$router.replace('/') ......三、keep-alive 实例–重点来了！！！
首先，在根vue文件中添加视图入口，在这里注意 和 的位置，以及判断当前路由是否设置了要做缓存
//app.vue <transition :name="transitionName"> <keep-alive> <router-view v-if="$route.meta.isKeepAlive" class="router-view"></router-view> </keep-alive> </transition> <transition :name="transitionName"> <router-view v-if="!$route.meta.isKeepAlive" class="router-view"></router-view> </transition>在route的meta属性中加一个属性isKeepAlive
// router/index.js export default new VueRouter({ saveScrollPosition: true, routes: [ {path: '/', redirect: '/main'}, { path: '/main', name: 'MainIndex', component: MainIndex, meta:{ isKeepAlive: true } }, ] })在有缓存的路由中处理数据
//MainIndex.vue beforeRouteEnter(to,from ,next){ //在这里访问不到this next(vm => { // 通过 `vm` 访问组件实例 vm.cerateInterval(); }) }, beforeRouteLeave(to,from ,next){ clearInterval(this.timer); clearInterval(this.secondTimer); next(); }四、keep-alive 新方式include
近期小编又get到了一种新方式，完美的解决了缓存和不需要缓存的路由翻页跳转混乱的问题
<transition :name="transitionName"> <keep-alive include="MainIndex"> <router-view class="router-view"></router-view> </keep-alive> </transition>export default { name: "MainIndex", data(){}, methods:{} }- include写法：
<keep-alive :include="News,HelloWorld"> <keep-alive :include="['News','HelloWorld']"> <keep-alive :include="/News|HelloWorld/"> <keep-alive :include="aliveComponent"> export default { name: 'App', data(){ return{ aliveComponent: ['News','HelloWorld'] } } }include的值是 router-view 中 需要缓存的路由 的name
这里会有个问题，这个缓存的路由，必须是keep-alive下的直接路由，如果是个子路由，则需要在加载子路由的地方再加个keep-alive，（两个地方都要加keep-alive，在app.vue中不加的话，到缓存路由的父路由会刷新加载，子组件相当于也刷新了，父路由再加keep-alive，也只能在父路由内缓存不刷新，出了父路由）-
App.vue入口vue文件，设置路由缓存
-
路由，显示，缓存的是router-view下路由的子组件，子路由
-
router-view包含的的路由
-
router-view包含的的路由的子路由，即需要缓存的路由页面
到此，就实现了某些路由页面的缓存~
加缓存后，数据要更新，还是需要在钩子函数中执行，这就用到了
activated,deactivated等钩子函数，详细讲解请看。。。。
-
keep-alive Vue-动态组件怎么使用
2021-12-06 16:56:24Document 显示组件一 ... }, 如图所示 效果 keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,所以log的销毁钩子函数不起作用 完 A lot can happen between now and never. 把握当下，一切皆有可能。展开全文<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button @click="com = 'com1'">显示组件一</button> <button @click="com = 'com2'">显示组件二</button> <!-- is属性绑定的时当前需要使用的组件 --> <keep-alive> <component :is="com"></component> </keep-alive> <!--keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,适用场景不需要变动的两个组件只是切换频繁,节省性能 --> </div> <script src="./js/vue.js"></script> <script> // 组件 1 const com1 = { template: ` <div>这是组件一的内容</div> `, created() { console.log('组件一创建了'); }, activated() { console.log('组件一激活了') }, deactivated() { console.log('组件一失活了') }, beforeDestroy() { console.log('组件一销毁之前') }, destroyed() { console.log('组件一销毁之后') }, } // 组件 2 const com2 = { template: ` <div>这是组件二的内容</div> `, created() { console.log('组件二创建了'); }, activated() { console.log('组件二激活了') }, deactivated() { console.log('组件二失活了') }, beforeDestroy() { console.log('组件二销毁之前') }, destroyed() { console.log('组件二销毁之后') }, } new Vue({ components: { com1, com2 }, data: { // 1 默认显示 com1组件 com: 'com1' }, }).$mount('#app') </script> </body> </html>
项目动态组件
上面我写在一个html中 没用cli,下面我再用项目创建一个动态组件
第一:新建两个子组件如下图
第二 :在父组件引入 注册 使用 ,在data定义默认显示的组件 例如 com, 在动态组件上写 :is="com"<keep-alive> <component :is="com"></component> </keep-alive> </div> data() { return { com: "com", }; },如图所示
效果
keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,所以log的销毁钩子函数不起作用
完
A lot can happen between now and never.
把握当下，一切皆有可能。
-
vuex + keep-alive实现tab标签页面缓存功能
2020-10-16 04:48:28主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下 -
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2020-12-30 04:09:26使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...
收藏数
18,330
精华内容
7,332
vue
订阅