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>
相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘10 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)11 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中11 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi12 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X12 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123413 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js