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

2024年1月26日 134次阅读 来源: codeMing_

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

解决方案：使用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>
  1. 在router文件下的index.js中，添加meta。
    { 
      path: '/Load',
      name: 'Load',
      component: Load,
      meta:{ 
      	keepAlive:true
      }
    },
  1. 在跳转的新页面中，添加beforeRouteLeave
    beforeRouteLeave(to,from,next){ 
      to.meta.keepAlive = true
      next(0)
    }
    原文作者：codeMing_
    原文地址: https://blog.csdn.net/q879936814/article/details/113338086
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞