Vue路由跳转到新页面之后，返回旧页面保持状态不变

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

新项目中遇到了登录时点击用户协议，进入协议页面让用户阅读，然后返回登录页面时发现原来填写的手机号验证码全都没有了。

分析原因：这是因为路由跳转从A到B，A路由会销毁，那么它的数据也会消失掉，当从B跳转回A时，就会显示一个最原始的A页面。这是路由的特性。

解决思路：共有三个

1. 使用vuex：中大型项目使用，作为Vue的状态管理工具，将需要保存的状态全都保存到Vuex中，无论路由如何跳转，需要数据时，找vuex要就可以了。
2. 使用父子组件传参：适用于简单的父子组件之间传值，使用props和emit，如果中间有多次路由跳转，那么就不建议使用了
3. 使用keep-alive：keep-alive是Vue提供的一个标签，翻译成中文就是保持生命，可以用来保存路由状态，即使路由跳转也不会销毁，等跳转回来，依旧还是跳转前的状态，可以让我们很方便的保留一些表单页面的状态，无需引入vuex这种庞大的工具。使用起来也很方便，只需要在router-view外层包裹，同时使用它的include属性，匹配路由name，还有exclude，名称匹配的不缓存，告诉它需要保存哪个页面的状态即可。Vue还给keep-alive提供了两个钩子，activated和deactivated。

解决方案：使用keep-alive

1. 在vue.app中添加keep-alive标签。

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

2. 在router文件下的index.js中，添加meta。

    {
      path: '/Load',
      name: 'Load',
      component: Load,
      meta:{
      	keepAlive:true
      }
    },

3. 在跳转的新页面中，添加beforeRouteLeave

    beforeRouteLeave(to,from,next){
      to.meta.keepAlive = true
      next(0)
    }