从品牌网站建设到网络营销策划,从策略到执行的一站式服务
需求分析
背景:
1.数据列表页,滚动加载数据;
2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作;
3.保存返回上一页;
在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的;
解决办法
1.原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置;
思路是这样,实际操作很麻烦;
2.推荐办法:使用vue动态组件keep-alive,搭配路由守卫函数beforeRouteLeave,以及activated钩子函数;
对于钩子函数执行顺序,以及作用详细说明,请参考vue组件的生命周期
步骤详解
我的步骤是按照开发思路进行的,场景就是从商品列表页——>商品详细页——>商品列表(数据缓存);
开发之前看到网上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我觉得没有必要,因为列表页不是一直需要缓存数据的,假如从首页进入,则不需要,所以就在路由守卫函数中判断是否需要缓存数据即可;
以下代码,使用list.vue代表列表页;detail.vue代表详细页;
场景1:点击返回,判断路由跳转的是否是需要缓存的列表页:
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard') { to.meta.keepAlive = true } next() }
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图