vue之列表页进入刷新，返回不刷新以及按需刷新的设计思路和实现方式

1. vue实现页面缓存

在vue中，许多组件需要实时刷新，譬如详情页。但有时候某些组件不需要重复渲染，譬如信息列表页。此时，我们可以使用<keep-alive>标签，实现组件缓存。写法如下，在app.vue文件中：

// app.vue
<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在router文件夹下的index.js中，给list页面的路由meta配置对应参数keepAlive值为true，即可针对性缓存list页面，但考虑到全局多个页面需要缓存，并实现按需刷新的功能，所以给list页面的路由meta配置对应第三方固定参数keepAliveFlage值为true，方便后续全局混入处理：

const routers = [
  {
    path: '/list',
    meta: {title: '列表页',keepAliveFlage:true},
    component: (resolve) => require(['../pages/list'], resolve),
  },
  {
    path: '/detail',
    meta: {title: '详情页'},
    component: (resolve) => require(['../pages/detail'], resolve),
  },
];
export default routers;

2. 实现列表页的进入刷新，返回不刷新与按需刷新

在缓存了列表页进入详情页之后，进入详情页修改了列表页数据，此时再返回列表页时，就需要对列表页进行刷新。而单纯的返回列表页则不会刷新

我们可以通过beforeRouteEnter以及beforeRouteLeave两个钩子来实现需求。在详情页执行以下代码：

// activated-reload.js
/**
 * @Description  : 全局混入：页面进入刷新，返回不刷新以及按需刷新
 */
export default {
	beforeRouteEnter: function (to, from, next) {
		// 页面状态初始化
		to.meta.refresh = false //默认返回列表页时，列表页不执行刷新
		if(from.meta.keepAliveFlag) from.meta.keepAlive = true //当路由设置keepAliveFlag时，列表页默认缓存
		next()
	},
	beforeRouteLeave: function (to, from, next) {
    if (from.meta.refresh) to.meta.keepAlive = false // 判断需要refresh时，返回列表页时，列表页执行刷新
		next()
	},
	methods: {
		activatedReload() {
			this.$route.meta.refresh = true //返回列表页时，列表页执行刷新
		},
	},
}

将上面的方法全局混入mixin，这样全局页面都可实现按需刷新，无需各个页面、组件重复配置:

// main.js
// 页面<keepAlive>时设置按需刷新 全局混入
import ActivatedReload from "@/mixins/activated-reload";
Vue.mixin(ActivatedReload)

当进入详情页时，初始化页面状态，处于默认返回列表页时，列表页不执行刷新、当列表页路由设置keepAliveFlag时，列表页默认缓存状态。当在详情页执行了数据操作后，调用activatedReload()方法，将列表页的缓存状态改为false，即可实现返回列表页后刷新。

/******************** 详情页 detail.vue ************************************/

// 提交数据后，需要刷新列表页
submitForm () {
    api(data).then((res) => {
      if (res.code === 0) {
        // 返回列表页刷新
        this.activatedReload();
        this.goBack();
      }
    })
},
    
// 单纯返回，不刷新页面
goBack () {
  this.$router.back();
},