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

2024-09-27 15:22:10

版权

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切换组件实现返回后不重置数据,保留历史设置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue 强制组件重新渲染(重置)的两种方案

数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效方案一当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch
vue data恢复初始化数据的实现方法

在我们进行vue开发过程中,经常会保存一些页面,此时,我们在app.vue的配置如下, <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> 以此来保存页面,那么在再次进入这些页面的时候,我们需要重置该页面的原始数据,那么该如何进行呢?是不是要讲每个数据进行重写,答案是否定的.利用Object.assign 以及vue的数据可
解决vue单页使用keep-alive页面返回不刷新的问题

使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成
解决vue页面刷新或者后退参数丢失的问题

在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代
Vue切换组件实现返回后不重置数据,保留历史设置操作

版权 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
Vue切换Tab动态渲染组件的操作

使用<component :is="组件名"></component> 结合Element-UI的导航菜单 : UI组件 el-menu-item里的index写对应的组件名点击事件@select="handleSelect" <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal&quo
vue动态组件实现选项卡切换效果

本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g
Vue transx组件切换动画库示例详解

目录来个介绍安装使用支持参数支持事件支持API 支持的动画类型说明来个介绍先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用  <trans-x :time="time" :delay=&q
解决ios微信下vue项目组件切换并自动播放音频问题

最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg
Vue.js组件实现选项卡以及切换特效

Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
vue组件开发之tab切换组件使用详解

本文实例为大家分享了vue组件开发之tab切换组件的具体使用代码,供大家参考,具体内容如下代码: <template> <div class="tab-slider"> <div class="tab"> <span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click=&quo
vue实现tab路由切换组件的方法实例

前言本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧实现图片如下下列为实现代码 css: *{ margin: 0; padding: 0; } #app ul{ width: 300px; height: 30px; list-style: none; } #app>ul>li{ width: 100px; height: 30px; float: left; } html: <div id="app
vue开发公共组件之返回顶部

本文实例为大家分享了vue开发公共组件之返回顶部的具体代码,供大家参考,具体内容如下记录一下开发公共组件的流程. 背景:pc端使用element-ui框架,本身是有返回顶部的组件的.现在需要在移动端使用.照着葫芦画瓢弄一个.记录如何将公共组件通过install的方式,注册为全局的组件使用. components目录下,新建bacttop文件夹,内部包含一个index.js文件和一个src文件夹.src文件夹内放backtop.vue组件文件. |--components |--index.

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

相关推荐

随机推荐