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>
相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_3 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD3 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
罚时大师月色7 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
fury_1237 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
宁&沉沦8 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
武天8 小时前
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
vue.js