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>
相关推荐
GIS程序媛—椰子38 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
杨荧2 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka