vue vue-router 完美实现前进刷新，后退不刷新。附scrollBehavior源码解析

需求：在一个vue的项目中，我们需要从一个列表页面点击列表中的某一个详情页面，从详情页面返回不刷新列表，而从列表的上一个页面重新进入列表页面则需要刷新列表。

而浏览器的机制则是每一次的页面打开都会重新执行所有的程序，所以这个功能并不能直接实现。而vue-router给我们提供了一个叫scrollBehavior的回调函数，我门可以用这个方法结合keep-alive能很好的实现这个功能，下面第一步附上实现代码：

首先我们创建a,b,c,d四个页面，在路由的meta属性中添加需要缓存的页面标识(isKeepAlive)：

import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld')
const A = () => import('@/components/router-return/router-a')
const B = () => import('@/components/router-return/router-b')
const C = () => import('@/components/router-return/router-c')
const D = () => import('@/components/router-return/router-d')

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/a', //前端全栈学习交流圈：866109386
    name: 'A',//面向1-3年前端开发人员
    component: A//帮助突破技术瓶颈，提升思维能力
  }, {
    path: '/b',
    name: 'B',
    component: B,
    meta: {
      isKeepAlive: true }
  }, {
    path: '/c',
    name: 'C',
    component: C
  }, {
    path: '/d',
    name: 'D',
    component: D
  }
]

然后我们修改app.vue页