前言

  相信大家都知道类于信息填写的界面，有上一步，下一步的操作，就会遇到下一步刷新上一步不刷新的问题。今天我也浅薄的学习了下相关的知识和具体实现方式，接下来直接上代码让大家借鉴参考一下。

一、回退不刷新

首先我们要实现的是回退不刷新，即B进入到C再从C回到B时，B不刷新。在App.vue中使用keep-alive，并根据keepAlive属性来判断是否要缓存组件，true为需要被缓存，false为不需要被缓存：
注意：需要被缓存的组件，要keep-alive包裹起来。

<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文件中，给所有的路由配置meta属性和keepAlive属性。

export const constantRoutes = [
    {
        path: '/login',
        name: 'login',
        component: lazyLoading('views/...../...../login'),
        meta:{
            keepAlive: false,//此组件不需要被缓存
        }
    },
    {
        path: '/home',
        name: 'home',
        component: lazyLoading('views/...../...../home'),
        meta:{
            keepAlive: true,//此组件需要被缓存
        }
    },
]

这样就能够实现页面回退时，不会刷新掉页面。并且可以随心所欲的给需要设置缓存的组件设置。

二、从上个页面重新进入当前页面，刷新页面

当大家把回退刷新做出来之后，很快又会遇到一个问题。如果B界面填写了信息后进入C又回到B，页面信息没有改变，回退功能成功！但是从B界面进入A再回到B界面时，它也依旧没有变化。如果你B界面的某些接口数据跟A界面是关联的，A发生了改变，B要重新获取数据，是不是就不能让B没有变化了？那是不是得刷新B界面？怎么做？看代码：
首先在router/index.js中，给meta中添加一个新的属性叫isBack

export const constantRoutes = [
    {
        path: '/login',
        name: 'login',
        component: lazyLoading('views/...../...../login'),
        meta:{
            keepAlive: false,//此组件不需要被缓存
            isBack: false,
        }
    },
    {
        path: '/home',
        name: 'home',
        component: lazyLoading('views/...../...../home'),
        meta:{
            keepAlive: true,//此组件需要被缓存
            isBack: false,
        }
    },
]

然后，在页面跟mounted同级别位置写以下代码：

beforeRouteEnter(to, from, next) {
        if(from.name == 'corporateInfo'){
            to.meta.isBack = true;
            to.meta.keepAlive = true;
        } // 当从上个页面corporateInfo返回当前页面时，不刷新当前页面
        next();
},
        //注意activated只能在keep-alive组件中调用
activated() {
       if(!this.$route.meta.isBack){
            // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
            this.$router.go(0)  //刷新当前页面
       }
       // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
       this.$route.meta.isBack=false
},

至此便解决了上一步，下一步，刷新与不刷新的问题。