最近在做PC端前端项目中,需要实现以下场景:

1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置(保留列表之前的当前页和搜索条件数据)

2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符合业务要求。

3.我在进入详情页时可以修改列表的数据,返回时滚动到,用户看到的应该是最新的数据

4.每个列表页面需要保存当前页和搜索条件数据。

针对以上前几点:

页面的缓存,我们需要用到vue的内置组件keep-alive,来缓存列表页面,同时配合路由选项来更改页面的数据。

在设置keep-alive缓存的组件中,首次进入组件,会一次调用组件的钩子函数:created --> mounted -->activated 再次进入时,只触发activated钩子函数

1.在路由出口渲染组件时配置:

2.在路由选项中,配置meta属性,keepAlive为true即为需要缓存的组件,同时设置isBack属性,用来标示页面是否是从详情页面返回的。

{

name: '首页',

path: 'index',

component: Index,

meta: {

keepAlive: true,

isBack: false

}

},

3.在组件实例中,通过beforeRouteEnter(to, from, next)路由守卫,来判断路由是从哪里跳转的,如果是从详情页跳转的,则将当前路由对象的meta.isBack 设置为true,否则设为false

beforeRouteEnter(to, from, next) {

if (from.path == "/detail") {

to.meta.isBack = true;

} else {

to.meta.isBack = false;

}

next();

},

为了在其他页面进入时,更新页面中的列表数据,我们将在activated钩子函数中挂载页面初次进入时的请求数据:

activated() {

if (!this.$route.meta.isBack) {

this.list = [];

this.pageNum = 1;

this.getList();

}

this.$route.meta.isBack = false;

},

4.在进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。

由于我们要在返回时滚动到浏览位置,因此不能去后台重新请求数据(否则无法回到之前浏览的位置),而是采用前端保存修改的数据,并在返回的activated钩子中对当前列表数据修改。

需要注意的事项:

由于vue自身限制,不能检测到数组直接修改长度和利用索引设值 因此,需要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)

然后根据页面离开时保存的滚动位置,将页面滚动到浏览位置。在router-view入口处,watch,$route对象,将keep-alive为true的页面,滚动到上次浏览位置。

5.在页面列表中,我们需要用到分页加载数据,即滑动加载

在keep-alive组件中,页面离开时,并不会销毁当前的vue实例,而是保存在内存中。因此就会造成问题:页面跳转时,触发了滑动事件,加载所有保存在内存中的滑动事件,改变了vue实例的数据。

因此,我们需要在组件的路由守卫中,在页面离开时beforeRouteLeave中把滑动事件禁用,然后再在页面进入的时候,在activated钩子中恢复滑动事件的。

注意: 使用keep-alive不能销毁实例,vm.$destroy(); 否则再进入页面,即使keep-alive为true也不会保存组件。如果keep-alive的页面较多,可以使用,在路由守卫中修改vuex的变量动态改变keep-alive的页面变量。

Logo

前往低代码交流专区

更多推荐