时间:2021-05-26
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。
基本使用如下:
<keep-alive> <component> <!-- 该组件将被缓存! --> </component></keep-alive>一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页
有两个情况:
1. 直接点击浏览器的后退返回按钮。
2. 点击导航栏中的 /list的链接返回。
那么针对第一种情况下,我们直接通过后退按钮时,返回到列表页(/list) 是不需要请求数据。
针对第二种情况下,我们通过链接返回到列表页是需要请求数据。
所以这边有三种情况:
1. 默认进来列表页需要请求数据。
2. 进入详情页后,通过浏览器默认后退按钮返回,是不需要ajax的请求的。
3. 进入详情页后,通过点击链接返回到列表页后,也是需要发ajax请求的。
配置如下:
1. 入口文件 app.vue 的配置如下:
<!-- 缓存所有的页面 --><keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view></keep-alive><router-view v-if="!$route.meta.keep_alive"></router-view>2. 在router中设置meta属性,设置 keepAlive: true 表示需要使用缓存,false的话表示不需要使用缓存。且添加滚动行为 scrollBehavior
router/index.js 的配置如下:
import Vue from 'vue';import Router from 'vue-router';// import HelloWorld from '@/views/HelloWorld';Vue.use(Router);const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式,才能使用 scrollBehavior base: '/page/app', // 配置单页应用的基路径 routes: [ { path: '/', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懒加载 meta: { keepAlive: true // true 表示需要使用缓存 } }, { path: '/list', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懒加载 meta: { keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存 } }, { path: '/detail', name: 'detail', component: resolve => require(['@/views/detail'], resolve) // 使用懒加载 } ], scrollBehavior (to, from, savedPosition) { // 保存到 meta 中,备用 to.meta.savedPosition = savedPosition; if (savedPosition) { return { x: 0, y: 0 }; } return {}; }});export default router;3. list.vue 代码如下:
<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/detail">跳转到detail页</router-link> </div></template><script>export default { name: 'helloworld', data () { return { msg: 'Welcome to Your Vue.js App' }; }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => { console.log(res); }); } }, beforeRouteEnter(to, from, next) { next(vm => { if (to.meta.savedPosition === undefined) { vm.ajaxRequest(); } if (to.meta.savedPosition === null) { vm.ajaxRequest(); } }) }};</script>4. detail.vue 代码如下:
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/list">返回列表页</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to Your Vue.js App' }; }, created() { this.ajaxRequest(); }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => { console.log(res); }); } }};</script>二:使用router.meta 扩展
假设现在有3个页面,需求如下:
1. 默认有A页面,A页面进来需要一个请求。
2. B页面跳转到A页面,A页面不需要重新请求。
3. C页面跳转到A页面,A页面需要重新请求。
实现方式如下:
在 A 路由里面设置 meta 属性:
{ path: '/a', name: 'A', component: resolve => require(['@/views/a'], resolve), meta: { keepAlive: true // true 表示需要使用缓存 }}所以router/index下的所有代码变为如下:
import Vue from 'vue';import Router from 'vue-router';// import HelloWorld from '@/views/HelloWorld';Vue.use(Router);
const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式,才能使用 scrollBehavior base: '/page/app', // 配置单页应用的基路径 routes: [ { path: '/', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懒加载 meta: { keepAlive: true // true 表示需要使用缓存 } }, { path: '/list', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懒加载 meta: { keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存 } }, { path: '/detail', name: 'detail', component: resolve => require(['@/views/detail'], resolve) // 使用懒加载 }, { path: '/a', name: 'A', component: resolve => require(['@/views/a'], resolve), meta: { keepAlive: true // true 表示需要使用缓存 } }, { path: '/b', name: 'B', component: resolve => require(['@/views/b'], resolve) }, { path: '/c', name: 'C', component: resolve => require(['@/views/c'], resolve) } ], scrollBehavior (to, from, savedPosition) { // 保存到 meta 中,备用 to.meta.savedPosition = savedPosition; if (savedPosition) { return { x: 0, y: 0 }; } return {}; }});export default router;在 B 组件里面设置 beforeRouteLeave
beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = true; // 让A缓存,不请求数据 next(); // 跳转到A页面}B组件所有代码如下:
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to B Page' }; }, created() {}, methods: { }, beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = true; // 让A缓存,不请求数据 next(); // 跳转到A页面 }};</script>在 C 组件里面设置 beforeRouteLeave:
beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = false; // 让A不缓存,重新请求数据 console.log(to) next(); // 跳转到A页面}c组件所有代码如下:
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to B Page' }; }, created() {}, methods: { }, beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = false; // 让A不缓存,重新请求数据 console.log(to) next(); // 跳转到A页面 }};</script>a组件内的所有的代码如下:
<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/b">跳转到b页面</router-link> <router-link to="/c">跳转到c页面</router-link> </div></template><script>export default { name: 'helloworld', data () { return { msg: 'Welcome to A Page' }; }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {}); } }, beforeRouteEnter(to, from, next) { next(vm => { if (to.meta.savedPosition === undefined) { vm.ajaxRequest(); } if (!to.meta.keepAlive) { vm.ajaxRequest(); } }) }};</script>注意 b组件到a组件不重新请求数据 (包括点击链接和浏览器后退按钮),c组件到a组件请求数据(包括点击链接和浏览器后退按钮).
查看github上的代码
总结
以上所述是小编给大家介绍的vue2中的keep-alive使用总结及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue中keep-alive的使用我总结的有两种方式应用:首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切
版权1、外层包围keep-alive作用将组件实例缓存下来2、清除组件缓存使用keep-alive的exclude="组件名"属性补充知识:vue简单的页面刷新
Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染。 在rout
vue2.0keep-alive的最佳实践,供大家参考,具体内容如下1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组
1.查看app.vue文件,这个是重点,不能忘记加(我就是忘记加了keep-alive)2.查看router.js{path:'/loanmessage',co