vue.js 使用keep-alive设置返回不刷新

在首页点击一条数据进入详情页，按返回键返回首页时页面刷新了重新调用接口，用户体验比较差，不流畅，这里整理总结一下我的解决方案。。。

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

原理：https://blog.csdn.net/zhangjing0320/article/details/80819652

<keep-alive>文章：https://www.cnblogs.com/goloving/p/9256212.html

直接代码解释：

1、APP.vue,设置缓存

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

2、index.js

{
            path: '/index',
            name: 'index',
            component: index,
            meta: {
                keepAlive: false  //默认不缓存
            }
        },

3、index.vue页面，添加一下代码，与methods方法同级。

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

4、inquiredetail详情页面，添加一下代码，与methods方法同级。

      //设置返回不刷新数据
        beforeRouteLeave(to, from, next) {
            if( to.path == "/index") {
                to.meta.keepAlive = true;
            } else {
                to.meta.keepAlive = false;
            }
            next();
        }, 

注意：beforeRouteLeave必须在有路由的页面才生生效。