1、最近用vue做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。
2、从其他菜单进去,不需要缓存,要保持页面的初始状态。
基于上面两种情况,我打算用vue中的keep-alive来缓存页面。

问题的解决方法

  • 列表项目

. 用vue的内置组件keep-alive来缓存列表页面,再路由出口渲染组件时配置:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
  • 在路由选项中,配置meta属性,keepAlive为true即为需要缓存,同时设置isBack属性,用来标识页面是否是从详情页面返回的。
{
  name:'borrow',
  path:'/borrow',
  component:borrow,
  meta: {
    keepAlive:true,
    isBack: true,
  },
}
  • 通过beforeRouteEnter(to,from,next),来判断路由是从哪里跳转的,如果是从详情页跳转的,将当前路由对象的meta.isBace设置为true,否则设置为false。(设置在查询页面)
beforeRouteEnter(to, from, next) {
  if (from.path == "/addborrow") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
},
  • 为了在其他页面进入时,更新页面中的列表数据和查询条件,我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。
activated() {
  if (!this.$route.meta.isBack) {
    this.handleClear('queryForm');/*清空查询条件*/
  }else{
    this.$route.meta.isBack = false;
    this.getBorrowList();/*列表重新加载*/
  }
},
Logo

前往低代码交流专区

更多推荐