vue小记——保持历史页面数据不变,实现返回后不重置数据

在Vue 2中,如果希望在用户导航到其他页面后再返回时保持历史页面的数据不变,可以使用<keep-alive>组件来实现

以下是如何使用<keep-alive>来保持历史页面数据不变的方法:

  1. 在路由视图组件外包裹<keep-alive>
html 复制代码
<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

这样,所有通过<router-view>渲染的组件都会被<keep-alive>缓存,除非它们被<transition><router-view>v-if/v-else等条件语句包裹。

  1. 使用includeexclude属性来精细控制缓存

如果您只想缓存特定的组件,可以使用includeexclude属性来指定哪些组件应该被缓存。

html 复制代码
<keep-alive include="Home,About">
  <router-view></router-view>
</keep-alive>

或者:

html 复制代码
<keep-alive exclude="Detail">
  <router-view></router-view>
</keep-alive>
相关推荐
天天进步20159 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒29 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
想自律的露西西★2 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳2 小时前
vue3:瀑布流
前端·javascript·vue.js
程序媛-徐师姐3 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
余道各努力,千里自同风4 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave4 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟4 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾4 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js