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>
相关推荐
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
midsummer_woo12 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端13 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)13 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦13 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010114 小时前
模块与组件区别
javascript·vue.js
结衣结衣.15 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
哎呦薇16 小时前
从开发到发布:手把手教你将Vue组件上传npm
前端·vue.js
用户38022585982416 小时前
vue3源码解析:生命周期
前端·vue.js·源码阅读
markyankee10118 小时前
Vue-Router:构建现代化单页面应用的路由引擎
前端·vue.js