vue页面状态保持

vue页面状态保持

项目中常常会有许多列表页，当我们点击进详情后再返回列表页,页面会刷新,导致列表返回到第一条,用户体验并不是很好.这时候我们就需要用到状态保持,让页面保持之前的状态,当用户返回的时候不刷新页面.
上代码:
首先: 我们需要在app.vue设置插槽是声明状态选择: 判断是否需要状态保持:

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

然后在路由文件中找到需要状态保持的页面的路由,在mate中添加keepalive:true

 {
    path: '/record',
    name: 'record',
    component: () => import('@/views/record/index.vue'),
    meta: {
      title: "成长档案",
      keepAlive: true
    },
  },

然后在需要状态保持的页面判断是否是从详情页面返回回来的,如果是,就保持状态保持,如果不是,就刷新页面(如果不判断，无论从哪个页面到此页面都不会再刷新，这并不是我们想要的):

//修改列表页的meta值，false时再次进入页面会重新请求数据。
    beforeRouteLeave(to, from, next) {
    	if (to.path == "/index") {
        	to.meta.keepAlive = true;
      	} else {
        	to.meta.keepAlive = false;
      	}
    }

ok,问题解决