vue列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来

第一步，在App.vue文件下加入keep-alive

刚开始我也是看的网上但是大多数是这样的

<div id="app">
    <!-- 可以被缓存的视图组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被缓存的视图组件 -->
    <keep-alive>
         <router-view v-if="!$route.meta.keepAlive"></router-view>
    <keep-alive>
  </div>

一开始我也是按照这样来的后面发现从列表页跳转到列表详情页的时候再返回第一次是没问题的，但是你点击其他列表跳到详情页的时候，详情页面还是前面的那个详情页面，从列表页传来的参数也没变化，后面就把下面那个判断删除才可以了，所以这里看自己项目需求

<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>

第二步 在路由文件中 ：router/index.js，给被要被缓存的页面设置 meta 属性（这里就是列表页），不需要缓存的视图，不用添加

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

第三步，在详情页里面设置 beforeRouteLeave

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}
    }
  }

这样我们就把这个需求给解决了。