vue实现返回上一页面,页面停留在原来位置,不进行刷新

从列表页面进入到详情页，当我们点击返回的时候，接口又会被重新刷新了，页面也会跑到顶部，这样一来,又要重新滑到之前浏览的位置,用户体验感很不友好.可以使用vue的keep-alive解决这一问题.

1.router里面配置一下路由

const routes = [
  
  {
    path: '/',
    name: 'Home',
    meta: {
      keepAlive:true
    },
    component: resolve => require(['@/views/Home'],resolve)
  },
  {
    path: '/login',
    name: 'login',
    component: resolve => require(['@/views/login'],resolve)
  },
  ]

在home页面我们进行设置字段keepAlive的值为true.

2.在App.vue中设置一下keep-alive

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