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的更多相关文章

  1. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  2. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. 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 ...

  7. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  8. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  9. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  10. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

随机推荐

  1. 搭建harbor私有仓库

    2-1.项目说明  Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,由VMware开源,其通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源 Docke ...

  2. Python基础阶段总结:ATM项目实战

    目录 ATM逻辑描述 三层框架简介 1.第一层(src.py) 2.第二层(interface文件夹下内容) 3.第三层(db_hanlder) 启动函数 用户注册功能 用户登录 common中的小功 ...

  3. nginx日志切割并备份

    [root@lecode-pre55 bin]# cat nginx-log.sh #!bin/bash #auther:ansheng #desc: nginx日志备份,注意脚本中文件的路径. #备 ...

  4. K8S kubesphere安装mysql

    原先我们使用Docker按照mysql时候的命令 docker run -p 3306:3306 --name mysql-01 \ -v /mydata/mysql/log:/var/log/mys ...

  5. 【第7篇】AI语音交互原理介绍

    本章主要介绍AI语音交互的原理,包括语音交互的流程以及各流程节点所涉及的相关知识,如语音采集.语音识别.自然语言处理.语音合成等. 2.1 AI语音交互 AI语音交互通俗点说就是人与机器间进行语音理解 ...

  6. 关于解决 inittramfs unpacking failed:Decoding failed 报错

    解决办法 vi /etc/initramfs-tools/initramfs.conf 更改COMPRESS=lz4以COMPRESS=gzip 保存更改 sudo update-initramfs ...

  7. 关于python函数传参

    必须参数 最常见的传参 def say(arg): print(arg) say("Hello world") 输出: Hello world 默认参数 def say(arg, ...

  8. 关于tomcat8在windows2008下高并发下有关问题的解决方案

    关于tomcat8在windows2008下高并发下问题的解决方案 因为客户服务器特殊的环境问题,只能使用windows2008r2服务器,然而配置过后,网站的高访问量很快就出现了各种问题,以下是解决 ...

  9. 这可能是最全的SpringBoot3新版本变化了!

    11月24号,Spring Boot 3.0 发布了第一个正式的 GA 版本,一起看看新版本到底有哪些变化. 2.7版本升级指南 官方提供了一个从 2.7 版本升级到 3.0 的指南:https:// ...

  10. day13 I/O流——字节输入输出流、字符输入输出流 & File常用类 & (字节)复制大文件

    day13 I/O流 定义:数据在两设备传输称为流,流是一组有顺序的,有起点和终点的字节集合 I 是input的缩写,表示输入流 O是output缩写,表示输出流 字节流(视频等) 输入InputSt ...