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

问题：

vue在返回上一页的时候执行this.$router.go(-1) ，默认会让上一页重新执行一遍生命周期。

解决方法：

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

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

路由配置router/index.js

const routes = [
 {
    path: '/pay',
    name: 'pay',
    component: () => import('../pages/pay.vue'),
    meta: {
      title: '支付',
      keepAlive: false // 不需要缓存
    }
  },
  {
    path: '/account',
    name: 'account',
    component: () => import('../pages/account.vue'),
    meta: {
      title: '结算',
      keepAlive: true // 需要缓存
    }
  }
  ]
  const router = new VueRouter({
  routes
})

Vue.use(VueRouter)

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

	<!-- 缓存的页面，缓存$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>

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

注意：

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

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