根据路由的meta字段中的keepAlive属性来决定是否缓存组件。 如果keepAlive 为true,则组件会被缓存;否则,它会被缓存。 const routes = [{path: '/foo',component: Foo,meta: { keepAlive: true } // 这个组件会被缓存},{path: '/bar',component: Bar,meta: { keepAlive: false } // 没有设置 meta.ke...
from,next){if(from.name==='Index'){// 处理页面缓存后,返回首页再次进入缓存页时数据为更新// 该生命周期无法获取到this,因此把vm实例当作参数传递next(vm=>{vm.pages.pageNum=1// 因为我这里查询表单是动态的,所以首页进入时需要调用一次,在改方法中请求返回后调用了获取列表数据getTableDatas方法vm....
vue-route缓存历史的难点 直观的看,<keep-alive>只需要页面组件名字,实现不会很难。实际上,include的值在路由前进后退时必须是变化的,否则会产生很多混乱。 考虑这种情况:routeA和routeB都需要缓存,从routeA进入到routeB再回退到routeA后,此时routeB是缓存未激活状态,如果此时再进入routeB看到的就是缓存的页面,而...
$route(to, from) {//如果要to(进入)的页面是需要keepAlive缓存的,把name push进include数组中if(from.meta&&to.meta&&from.meta.deepth&&to.meta.keepAlive) {!this.include.includes(to.name) &&this.include.push(to.name); }//如果 要 form(离开) 的页面是 keepAlive缓存的,//再根据 deepth 来判断...
// 缓存的对象:并不是所有路由组件都需要缓存,只有进行路由跳转后要保留当时真实DOM中数据的路由组件才需要进行缓存,缓存的路由组件不会被销毁 // 1. 确定要缓存的路由组件最终是展示在哪个展示区的,找到那个展示区 // 2. 用<keep-alive>标签包裹<router-view>,并添加include属性 ...
vue-router数据加载与缓存使用总结 之前开发了一个单页面应用,按照深度,分为三层:目录页、一级子页(标签页、故事页等)、二级子页(故事编辑页)。 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据;回到上一级时,数据有更新。举个栗子,从故事页点击“编辑”按钮,进入故事编辑页...
//缓存页面 beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = true; // B 跳转到 A 时,让 A 缓存,即不刷新(代码写在B页面) next(); } 1. 2. 3. 4. 5. 6. beforeRouteLeave(to, from, next) { ...
在前文Vue 全站缓存之 keep-alive : 动态移除缓存和Vue 全站缓存二:如何设计全站缓存中,我们实现了全站缓存的基础框架,在页面之间后退或同层页面之间跳转时可以复用缓存,减少了请求频率,提升了用户体验,最赞的是,开发逻辑理论上会简单直观很多。 出现了一个新需求 ...
从第一篇文章Vue 全站缓存之 keep-alive : 动态移除缓存开始,我们就一直在强调如何去实现页面缓存,vue-router-then 正是建立在页面缓存成功的基础之上的功能,如果你不能正确的使用页面缓存功能,或者说页面缓存被销毁了,vue-router-then 也就没有意义了。
项目中会有这样的需求,有的页面需要缓存(例如列表页),有的页面不需要缓存(例如详情页),这时候就需要 keep-alive keep-alive 缓存 1.路由设置 meta 的 keepAlive {path: '/list', name: '首页', component: Home, meta:{keepAlive:true}},{path: '/detail/:id', ...