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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vuex实现购物车功能
Jun 28 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
无线电的诞生过程
2021/03/01 无线电
信用卡效验程序
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue实现评论列表功能
2019/10/25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
python调用fortran模块
2016/04/08 Python
深入理解Python装饰器
2016/07/27 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
投标承诺书范本
2014/03/27 职场文书
出国留学计划书
2014/04/27 职场文书
户外活动总结范文
2014/04/30 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
通知怎么写?
2019/04/17 职场文书