vue返回上一页不刷新页面的方法 / vue缓存页面

问题：

vue框架下，在返回上一页的时候（this.$router.go(-1）) ，默认会让上个页面重新执行一遍生命周期（即被刷新了）。

想达到的效果：

返回上一页不刷新页面。

解决方法：

缓存上一页的页面，让其在已经存在的情况下，再次显示时不重新执行生命周期；

使用技术：keep-alive（vue的内置组件）

router路由配置router/index.js

const routes = [
 {
    path: '/pageA',
    name: 'pageA',
    component: () => import('../views/pageA.vue'),
    meta: {
      title: '我是页面A',
      keepAlive: false // 不需要缓存
    }
  },
  {
    path: '/pageB',
    name: 'pageB',
    component: () => import('../views/pageB.vue'),
    meta: {
      title: '我的页面B',
      keepAlive: true // 需要缓存
    }
  }
  ]
  const router = new VueRouter({
  routes
})

Vue.use(VueRouter)

template模板代码 (分发路由的页面)：

<template>
  <div id="app">
	<!-- 缓存的页面，缓存$route.meta.keepAlive为true的组件 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <!-- 不缓存的页面，不缓存$route.meta.keepAlive为false的组件 -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
</template>

说明：被keep-alive包裹的动态组件（页面），在组件不活动时，会缓存它们的组件实例，而不是销毁它们。

注意（增加的钩子函数）：

缓存页面多出两个钩子函数，用于显示和隐藏该缓存的页面时触发

// activated是页面激活后的钩子函数，一进页面就会触发
 activated () {
  // 显示时
    console.log(1)
  },
  // deactivated 离开页面的钩子函数，一离开页面就会触发
  deactivated () {
    // 不显示时
    console.log(2)
  },