Vue单页应用，前进刷新后退不需要刷新

Posted 2021-05-01 云在脚途

        Vue单页应用的时候，会遇到这样的情况，前进的是时候需要刷新页面，获取新的数据，但是后退的时候不需要刷新页面，只需要用缓存中的数据就可以。例如：【首页】-【详情页】-【提交订单页】。所以这里【首页】和【详情页】需要用到数据缓存。

用keep-alive来缓存需要缓存的页面。

在app.vue 中修改router-view，

    <keep-alive>        <router-view v-if="$route.meta.keepAlive">        <!-- 这里是会被缓存的视图组件，比如 page1,page2 -->        </router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">    <!-- 这里是不被缓存的视图组件，比如 page3 -->

    </router-view>

    在router文件夹下的index.js中设置路由

    exports default new Router({

        routes:[{

         path: '/',

        name: 'index',

        component: index,

        meta: {

         keepAlive: false, //此组件不需要被缓存

       }        },        {

            path: '/page1',

            name: 'page1',

            component: page1,

            meta: {

                 keepAlive: true, //此组件需要被缓存

                 isBack:false            }        },        {

        path: '/page2',

        name: 'page2',

        component: page2,

        meta: {          

             keepAlive: true, // 此组件需要被缓存

             isBack:false        }        },        {        

            path: '/page3',

            name: 'page3',

            component: page3,

            meta: {

                keepAlive: false, // 此组件不需要被缓存        }    }]

    })；

    判断router中对应页面下的meta属性下的keepAlive的值。true：就是需要缓存数据。false是不需要缓存数据。

因为是要以page1页面为准，从page2回退到page1的话，才不刷新页面。

我们可以通过beforeRouteEnter这个钩子函数中的from参数判断是从哪个页面过来的，这个参数执行时，组件实例还没创建，所有不能在data中定义变量。我们可以在路由中定义一个变量，用来判断。在main.js文件中，

beforeRouteEnter(to, from, next) {      // 路由导航钩子，此时还不能获取组件实例 `this`，所以无法在data中定义变量（利用vm除外）      // 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html      // 所以，利用路由元信息中的meta字段设置变量，方便在各个位置获取。这就是为什么在meta中定义isBack      // 参考 https://router.vuejs.org/zh-cn/advanced/meta.html      if(from.name=='page2'){          to.meta.isBack=true;          //判断是从哪个路由过来的，          //如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可      }        next();    },

activated中执行getData这个获取数据的方法

因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据。

即使设置了keep-alive组件的beforeUpdate和updated钩子函数还是会调用的。

activated和unactivated钩子是在keep-alive组件里面被调用的，不是第一次进入keep-alive组件的话，调用顺序是：
beforeEach->beforeRouteEnter->activated->beforeUpdate->beforeRouteEnter的next函数；

  keep-alive 组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
  //当页面存在缓存的时候执行该函数。

第一次进入需要刷新获取新数据，从page2回退不需要刷新，但是还有一种情况需要刷新获取新数据，就是用户手动刷新的时候

，在page1页面的data中定义一个变量：isFirstEnter：false，

在created生命周期函数中，设置this.isFirstEnter = true;

activated() {  

if(!this.$route.meta.isBack || this.isFirstEnter){    // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据    this.getData();  }  // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据  this.$route.meta.isBack=false

},