精华内容
下载资源
问答
  • 环境vue项目,页面有搜索、筛选项等。需求页面跳转,切换或者刷新,希望可以...但是,这样并不能满足刷新页面依旧可以记住页面状态的需求。因为刷新浏览器页面的时候,等于是刷新了整个vue实例应用,所有vue缓存的数...

    环境

    vue项目,页面有搜索、筛选项等。

    需求

    页面跳转,切换或者刷新,希望可以记住用户在页面的筛选状态

    方案v1

    vue有提供一种缓存组件的解决方案 — keep-alive。

    缓存不活动的组件实例,而不是销毁它们。

    我们可以使用keep-alive包括路由组件,去缓存页面状态。

    但是,这样并不能满足刷新页面依旧可以记住页面状态的需求。因为刷新浏览器页面的时候,等于是刷新了整个vue实例应用,所有vue缓存的数据都会丢失。

    方案v2

    基于方案1的缺陷,衍生出了方案v2

    为了满足刷新页面依然能够记住页面状态,我们需要把页面状态做持久化处理

    在localStorage, sessionStorage, cookie三种方案中,我选择了sessionStorage

    然后只需要,在页面刷新或者销毁之前,记录页面需要记住的参数。然后在页面加载的时候读取之前存储的参数。

    为了可复用和尽量小的代码侵入性。我把相关代码封装成了一个mixin,代码如下:

    // 定义一个混入对象

    let paramsMemoryMixin = {

    data () {

    return {

    // 记住参数存储的key, 请在引用该mixin的组件中重写

    memoryParamsKey: 'nb-memory-params'

    }

    },

    created: function () {

    this.initParams();

    // 在页面刷新时将筛选信息保存到sessionStorage里

    window.addEventListener('beforeunload', this.onPageUnload);

    },

    methods: {

    initParams () {

    let userParams = JSON.parse(sessionStorage.getItem(this.memoryParamsKey));

    for (let key in userParams) {

    this[key] = userParams[key];

    }

    },

    onPageUnload () {

    sessionStorage.setItem(this.memoryParamsKey, JSON.stringify(this.getMemoryParams()));

    },

    /**

    * 需要记住的页面参数

    * @return { key: value }

    */

    getMemoryParams () {

    throw Error('请重写paramsMemoryMixin的getMemoryParams方法');

    }

    },

    beforeDestroy () {

    window.removeEventListener('beforeunload', this.onPageUnload);

    },

    beforeRouteLeave (to, from, next) {

    this.onPageUnload();

    next();

    }

    };

    export default paramsMemoryMixin;

    然后,在需要缓存的页面,引入该mixin,并重写存储参数的键名: memoryParamsKey 和获取缓存数据的方法 getMemoryParams () 。例如:

    import memoryMixin from '文件路径/params-memory-mixin.js';

    export default {

    mixins: [ memoryMixin ],

    data () {

    return {

    // 记住参数存储的key

    memoryParamsKey: 'xx-xx-params'

    }

    },

    methods: {

    getMemoryParams () {

    return {

    key1: this.value1,

    key2: this.value2,

    key3: this.value3

    };

    }

    }

    }

    至此,问题解决。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:

    41f7ff93d69e376db189c5a719760bc4.png

    如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下

    那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

    这时候我们最直接的思维就是想到下面这种:

    bf6be58c1dc33b67954b39d40cbb3a11.png

    但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!

    下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:

    1、最直接整个页面重新刷新:

    06180a25178abd8fe5590482da1b2d8e.png

    location. reload()

    this.$router.go(0)

    这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

    2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来

    a414ed095f5495029a4db6f149e1d5f7.png

    空白页supplierAllBack.vue里面的内容:

    11add9f10f360cf7c8e52195bd5b1852.png

    这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

    3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue

    af31d756b3862dbcac989c14863f9a27.png

    通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

    isRouterAlive //true or false 来控制

    然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

    01fc7d3d37d58e8079e2e8afb6d7e4f0.png

    总结

    以上所述是小编给大家介绍的vue项目刷新当前页面的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    展开全文
  • vue.js让网页定时刷新在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况,那么这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢...

    vue.js怎么让网页定时刷新?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    226c9c4e8c9b977c60dc40fc0f624d6c.png

    vue.js让网页定时刷新

    在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况,那么这个时候我们就要使用setInterval()了。

    那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢?这就需要我们了解vue的生命周期。首先贴一张从官网截下来的图吧。

    3c531101d02c5fc93946daae9ba7fbd0.png

    在该图上我已经标注了触发和清除的时期,那么我们在使用中还有几个需要注意的点。使用setInterval时this指向的问题。如果我们直接

    this.timer = setInterval(function(){要触发的函数}) 是会报错的。因为这样的话this的指向为window,但是我们要触发的函数是挂载在vm实例上面的。所以这个时候就是箭头函数发挥用处的时候了。我们可以直接这样写this.timer = setInterval(() => {要触发的函数}).

    使用mouted,beforeDestory时注意他们是和method平级的。

    看看代码:

    5f812883eded6df996781b4281e108b7.png

    在destroyed的时候清除页面刷新的。

    7491b3040eaa4c029d3e5f983f48a8bc.png

    这里的getMigrateDetail()是自定义的一个函数,大家在实现的时候只需要把它替换成自己的函数就ok了。

    更多web前端开发知识,请查阅 HTML中文网 !!

    展开全文
  • vue页面自动刷新的问题

    千次阅读 2019-09-25 00:51:44
    1、 activated(VUE页面自动刷新的问题) 在项目中遇到需要添加完数据之后跳转到展示页不自动刷新的问题,最开始想到的是created()或者mounted();没能实现;因为全局vue.js不强制刷新或者重启时只创建一次,也...

    1、 activated(VUE页面自动刷新的问题)

    在项目中遇到需要添加完数据之后跳转到展示页不自动刷新的问题,最开始想到的是created()或者mounted();没能实现;因为全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()或者mounted()只会触发一次。

    activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。

    2、watch

    watch :在vue实例化时将会遍历所有属性,然后监听其变化。

    <body>
        <div id="app">
            <input v-model="name"/>
            <span>{{name}}</span>
        </div>
    </body>
      <script>
          app = new Vue({
              el:"#app",
              data:{
                  name:'1'
              },
              watch:{
                  name:function(){
                      console.log("changed");
                      this.show();
                  }
              },
              methods:{
                  show(){
                      console.log("show function")
                  }
              }
          })
      </script>

    3、computed 计算属性

    computes: 其中的属性不用在data中定义,示例如下:

    <div id="app">
      <input v-model="name" />
      <span>{{names}}</span>
    </div>
    
    <script>
          app = new Vue({
              el:"#app",
              data:{
                  name:''
              },
              computed:{
                  names:function(){
                      return this.name + "world";
                  }
              }
          })
    </script>

    转载于:https://www.cnblogs.com/newbest/p/11210244.html

    展开全文
  • 我们可以使用keep-alive包括路由组件,去但是,这样并不能满足刷新页面依旧可以记住页面状态的需求。因为刷新浏览器页面的时候,等于是刷新了整个方案v2基于方案1的缺陷,衍生出了方案v2为了满足刷新页面依然能够...
  • 主要介绍了Vue页面刷新记住页面状态的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue强制刷新页面

    千次阅读 2020-04-14 11:54:19
    1、this.$router.go(0); 2、location.reload(false); 3、location.reload(); 关于上述几种方式的区别: this.$router.go(0)时,相当于重新跳回当前页面 location.reload(true)时,...这两种都可以刷新当前页面的,缺...
  • 使用Vue.nextTick实现进入页面文本框自动获取焦点 场景:页面加载时需要让文本框获取焦点 用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM <input type="text...
  • vue页面自动刷新

    万次阅读 2019-07-05 16:33:00
    当我们在做项目时,我们需要做当前页面的刷新来达到数据更新的目的,在...这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。 2.通过...
  • 1.window.location.reload(),是原生JS提供的方法,this.$router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于...
  • 1. 用vue-router重新路由到当前页面页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向...
  • Vue定时刷新页面数据

    千次阅读 2020-03-26 12:21:47
    我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout、setInterval定时执行,另一种是websocket消息推送。我的需求是,当数据库中的数据发生更新时,前端就要检测并展示出这些数据。这个正确...
  • 1.页面刷新时,判断URL地址与左边导航栏定位是否相符 PS1:window.location.hash返回从井号#开始的地址,例如http://aaa.com/#/action/aboutUs,...PS2:Location对象属性 2.刷新页面,定位到相当于的导航栏 ...
  • vue 定时刷新页面数据

    2021-04-02 00:04:46
    系统中很多数据都具有一定的实时性要求,在vue中的实现如下: mounted () { global._this = this this.someMethod() // this.remoteMethod() // 每分钟刷洗数据 if (this.timer !== null) { console.log('...
  • vue网站实时自动刷新

    2021-06-22 15:32:40
    问题:在使用vs code ,更新并保存vue代码,网页界面...(vue网站实时自动刷新) Type:热更新 解决方法: 1、开启自动保存,File->Auto save; 2、VS code软件里打开View->Extensions,下载插件Live Server. ...
  • 1. 用vue-router重新路由到当前页面页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先...
  • Vue添加自动刷新功能

    千次阅读 2020-06-01 10:08:56
    前言         在实际开发中,当页对数据库进行增删改的过程中,vue不会对DOM进行渲染,因此要用刷新来重新查询显示这些数据。...因此会想到App.vue是所有页面
  • 这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。 2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来...
  • vue项目刷新当前页面

    2019-05-31 15:38:13
    场景:自己项目中遇到 点击弹窗确定按钮时,当前页面的支付状态更改 页面需要不刷新实时更改 解决方法: 1.provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起...
  • vue中如何使页面自动刷新

    千次阅读 2020-10-15 22:37:11
    vue如今是十分常用的前端框架,而我们在使用vue框架时总会碰到一个问题,那就是进行完所需要的操作以后如何进行页面自动刷新,以下就来说一说几种方法: 一. window.location.reload(),是原生JS提供的方法, this.$...
  • 本人所在的项目之前没有设置过自动刷新,目前功能上按F5就会进入到登陆页面。但现在领导要求有页面自动更新数据,所以本人需要实现这个。 HTML更新方法 <!-- 每20秒更新一次 --> <meta ...
  • 在很多项目中,实现修改、删除某项数据成功后,需要自动刷新。 但是像go()或者reload()等函数,确实可以实现刷新,但是这种刷新是刷新浏览器,页面会出现空白,然后重新渲染数据,用户体验不是很好。 在Vue项目中,...
  • vue刷新页面 刷新页面的三种方法 在项目中又刷新整个页面的需求,所以我们来谈谈刷新页面的方法,有两种常见的方法,还有一种不常见但是极力推荐的。 第一种 this.$router.go(0) 第二种 location. reload() 这两...
  • vue 异步刷新页面

    千次阅读 2019-02-20 16:17:00
    入口文件vue.app中 <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide (){ return { ...
  • 关于vue页面自动刷新的解决provide / inject 组合 1.修改你的app.vue,通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了 isRouterAlive //true or false 来控制 <template&...
  • Vue新手,小小一个页面自动刷新竟然也花了不少时间。 页面数据依靠AXIOS Get获取,进入页面后自动每秒请求一次刷新页面数据,切换其他页面后停止。 自动刷新 data () { return { polling: null } } methods : { ...
  • Vue刷新当前页面

    2019-08-23 10:40:08
    刷新页面 方法一 window.reload(); 方法二 this.$router.go(0); 以上两种方式会出现白屏 方法三 不会有闪烁的空白出现 App.vue <template> <div id="app"> <!-- 增加判断,让其隐藏 --> &...
  • 我们在代码编写的时候,为了更好的体验,有时候需要清除本地存储的token来自动刷新页面跳到登陆页面 这时候就需要一个监听器来监听本地存储的变化来执行操作 下面我们会用到一个JavaScript的addEventListener()事件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,450
精华内容 7,780
关键字:

vue自动刷新页面

vue 订阅