VUE中keepAlive结合路由判断页面是否需要刷新

需求：就像是淘宝的商品列表页面跳转到详情页的时候，当返回上一级的商品列表时，肯定是返回上次浏览的位置，不然用户体验很差，还要花时间先翻到上次浏览的位置然后才能继续浏览，解决办法是有，那就是使用keepAlive,但是，随之问题也发生了，你的商品列表页无论怎么变化，还是上次第一次缓存的商品列表页，就会产生问题（因为一般商品列表页都有路由传值，查找特定的商品）。解决办法如下：

首先，在app.vue中使用keepAlive,如果是meta信息里keepAlive为true，那就包在keep-alive里，不然就是正常的路由，不需要缓存

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

然后，你需要在路由中写入meta的keepAlive信息,将你需要使用keepAlive的页面的meta设置true

{
    path: '/home',
    name:"Home",
    component: resolve => require(["@/pages/Home"], resolve),
    meta: {
        keepAlive: true, // 不需要缓存
        title:'登录'
    }
},

上面的步骤写好，那么你现在，就已经开启了vue的keepAlive了。

如何解决路由变化不刷新的问题，那就是在router.js中写入路由跳转的判断,意思是如果你是从详情页到商品的详情列表页，那么开启keepAlive,别的情况就不需要缓存，其中,to是即将跳转到的页面，而from是当前页面，如果你还有别的需求，可以在加else if继续写。这样子，就完成了按需的keepAlive。

router.beforeEach((to, from, next) => {
 if(to.name==='Home' && from.name==='GoodsDetail'){
    to.meta.keepAlive = true;
  }else{
    to.meta.keepAlive = false;
  }
  next();
});