前言

在项目中有表单提交的时候，用户一般填了数据之后返回上一个页面再进入时不希望已填数据丢失，这时候就需要对页面进行状态保持。

实现原理

主要实现原理，状态保持的路由不会执行生命周期的钩子函数，只有第一次进入页面会执行钩子函数。
actived :这也是一个钩子函数，keepAlive状态保持的页面中生命周期的钩子函数不会触发，但是会触发actived钩子函数，那么这样可操作性就很大了。

具体实现代码

App.vue文件
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

Router文件夹下定义路由的文件index.js
export const reserverRoom = {
  name: 'reserverRoom',
  path: 'reserverRoom',
  component: createAsyncComponent(() => import('自己的文件路径')),
  meta: {
    title: '预订会议室',
    keepaAlive: true,
    isBack: false,
    firstTime: true,
  }
}

这样就可以对某一个页面进行状态保持了，而不用对所有页面都状态保持。

actived和created的区别

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。