Vue切换组件实现返回后不重置数据,保留历史设置操作


Posted in Javascript onJuly 21, 2020

版权

1、<router-view ></router-view> 外层包围<keep-alive> </keep-alive>

keep-alive作用将组件实例缓存下来

<keep-alive>
  <router-view></router-view>
</keep-alive>

2、清除组件缓存

使用keep-alive 的 exclude="组件名" 属性

<keep-alive exclude="home">
    <router-view ></router-view>
</keep-alive>

补充知识:vue 简单的页面刷新或者跳转页面的数据保存问题

当我们想刷新页面也保存当时的数据的时候,会遇到这样那样的问题,其实,仅仅的几行代码就什么都解决了,下面是代码(js):

var vm = new Vue({
 el:'.search_moduel',
 data:{
  history:[] //存储查询历史记录的数据
 },
 methods:{
  //刷新页面或者从别的页面进入,提取this.history的值
  getPageData:function(){
  this.history = JSON.parse(localStorage.getItem('this.history'));//使用getItem方法的前提是,你再自己需要的地方使用了setItem方法
  }
 },
 //钩子函数,在实例被创建之后被调用,调用getPageData()
 created:function(){
  this.getPageData();
 }
 });

以上这篇Vue切换组件实现返回后不重置数据,保留历史设置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue 实现tab切换保持数据状态
Jul 21 #Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
You might like
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
构建一个JavaScript插件系统
2020/10/20 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python中dir函数用法分析
2015/04/17 Python
python实现BackPropagation算法
2017/12/14 Python
python框架中flask知识点总结
2018/08/17 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python2与Python3的区别点整理
2019/12/12 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
开学寄语大全
2014/04/08 职场文书
2015年公司新年寄语
2014/12/08 职场文书
雨花台导游词
2015/02/06 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
使用 JavaScript 制作页面效果
2021/04/21 Javascript
i7 6700处理器相当于i5几代
2022/04/19 数码科技