vue基础之keep-alvie保持历史页面数据不变,切换页面后数据不变keep-alvie
1:路由配置文件设置
{
path: '/MenuM',
component: Layout,
redirect: '/MenuM',
children: [
{
path: 'MenuM',
name: 'MenuM',
component: () => import('@/views/MenuM'),
meta: { title: '主界面', icon: 'table', keepAlive: true }
}
]
},
2.标注需要缓存的组件,用包裹
这一步需要注意了,有的是在APP.VUE改,有的要看所在组件里改哦~~,比如上面的component: Layout,
那我们需要修改的文件就不是app.vue了,需要修改对应文件才行,
要不然就会无法缓存页面数据,出现问题
src\layout\components\AppMain.vue
<template>
<section class="app-main">
<div class="app-main-top">
<transition name="fade-transform" mode="out-in">
<div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
<!-- <router-view :key="key" /> -->
</div>
</transition>
</div>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.path
}
}
}
</script>
<style lang="less" scoped>
.app-main {
/*50 = navbar */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
// background-image: url(~@/assets/image/bg01.jpg);
.app-main-top {
padding-top: 5px;
padding-bottom: 5px;
// background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 1); // 修改背景
min-height: calc(100vh - 50px);
}
}
.fixed-header + .app-main {
padding-top: 50px;
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 15px;
}
}
</style>
在router中设置需要缓存的组件
包裹需要缓存组件
页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated
可以动态控制是否缓存组件,代码如下:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 不缓存,即刷新
next();
}
参考来源
https://www.jianshu.com/p/eeda81293826
https://zhuanlan.zhihu.com/p/48628352
vue基础之keep-alvie保持历史页面数据不变,切换页面后数据不变keep-alvie的更多相关文章
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
随机推荐
- 两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?
首先这里的div设置为了行内块元素,span本身为行内元素,并且设置了* {padding: 0; margin: 0;},那怎么清除元素之间的空白缝隙呢?? (1)给元素加浮动 <!DOCTY ...
- 记一次mybatis性能问题分析过程
说明 今天发现个2个问题,一是mybatisplus执行一条某个字段值比较长(约1.8M的文本)的INSERT语句耗时要90s+;二是读取这个1.8M文本返回给前端耗时6min.查查查查了半天搞不清楚 ...
- 《Hierarchical Text-Conditional Image Generation with CLIP Latents》阅读笔记
概括 模型总述 本篇论文主要介绍DALL·E 2模型,它是OpenAI在2022年4月推出的一款模型,OpenAI在2021年1月推出了DALL·E模型,2021年年底推出了GLIDE模型. DALL ...
- 关于CSDN获取博客内容接口的x-ca-signature签名算法研究
前言 源码下载 不知道怎么就不通过了,这篇文章放出去几个月了,然后突然告诉我不行了,所以我打算换个平台(至少不能在一棵树吊死),垃圾审核 我最初想直接获取html博客,然后保存在本地,最后发布到别的博 ...
- nginx-1.22.0版本安装
nginx运行状态查看 查看80端口占用情况:netstat -tunlp | grep 80 # 查看进程是否运行ps -A | grep nginx # 强制关闭nginxpkill nginx ...
- 【实时数仓】Day00:数据流程、课程内容、框架结构、知识点总结
一.数据流程 1.离线数仓 2.实时数仓 二.课程内容 1.数据采集层(ODS) 2.DWD层与DIM层数据准备 3.DWM层业务实现 4.DWS层业务实现 5.ClickHouse 6.数据可视化接 ...
- OpenAI 推出超神 ChatGPT 注册教程来了
前几天,OpenAI 推出超神 ChatGPT,非常火爆.但是呢,因为不可抗力原因,大部分人无法体验到.这里我分享一下注册的攻略. 准备 首先能能访问 Google(前置条件,不能明确说,懂得都懂) ...
- 有状态软件如何在 k8s 上快速扩容甚至自动扩容
概述 在传统的虚机/物理机环境里, 如果我们想要对一个有状态应用扩容, 我们需要做哪些步骤? 申请虚机/物理机 安装依赖 下载安装包 按规范配置主机名, hosts 配置网络: 包括域名, DNS, ...
- VMware ESXi 8.0 SLIC & Unlocker 集成网卡驱动和 NVMe 驱动 (集成驱动版)
发布 ESXi 8.0 集成驱动版,在个人电脑上运行企业级工作负载 请访问原文链接:VMware ESXi 8.0 SLIC & Unlocker 集成网卡驱动和 NVMe 驱动 (集成驱动版 ...
- Django框架版本区别
目录 一:django版本区别 1.django1.X路由层使用的是url方法 2.虽然path不支持正则 但是它的内部支持五种转换器 3.五种转换器 4.除了有默认的五个转换器之外 还支持自定义转换 ...