Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据

这个问题我最后还是借鉴了大佬的经验

注：这个主要的应用场景是，类似今日头条一样的项目，就是列表页面都是文章，然后翻到其中一篇文章点进去看完退出来，页面还是位于你点进去的那个位置。

直接上教程

首先在router.js中的列表页中添加缓存的变量：

{
    path: '/',
    name: 'home', // 列表页
    component: home,
    meta: {
      keepAlive: true //此页面需要缓存
    }
}

在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加）

{
    path: '/notedetail',
    name: 'noteDetail',
    component: notedetail,
    meta: {
      keepAlive: true //此页面需要缓存
    }
  },

然后在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>

然后在详情页中与methods:{}平级添加一个方法：代码如下

beforeRouteLeave(to, from, next) {
    //设置下一个路由的meta,让列表页面缓存,即不刷新
    to.meta.keepAlive = true;
    next();
  },

在router/index.js中添加如下的代码：

scrollBehavior(to,from,savePosition){
    if(savePosition){
      //解决页面从列表页跳转到详情页返回,初始在原来位置
      return savePosition
    }else{
      //解决页面跳转后页面高度和前一个页面高度一样
      return {x:0,y:0}
    }
  }

这里会发现，有时候添加文章的时候却看不到最新添加的那篇文章了，这里给出大家解决的方案

我这里是做了一个添加文章的网站

这里可以使用vue中的一个钩子函数：activated
这个函数的作用：
把需要刷新的数据和操作放在这个里面  activated只有在被<keep-alive> 包裹下的时候才会被触发 ，并且是一进这个设置有缓存的页面就会触发

下面上代码：

我这里的思路是在修改和添加页面还有删除页面返回主页的时候添加了路由参数，然后在这个方法中判断，有这几个参数，那么就重新加载渲染文章的方法，否则就保持原来的缓存。