1). location方式
location.reload()

缺点:刷新页面,卡白
2). router方式
this.$router.go(0)
缺点:同一问题,比一好点
3). provide/inject方式
App.vue
<router-view v-if="isRouterAlive"></router-view> <script>
export default {
name: 'App',
// 提供reload方法
provide: function () {
return {
reload: this.reload
}
},
// isRouterAlive控制显示
data: function () {
return {
isRouterAlive: true
}
},
methods: {
// 刷新方法
reload: function () {
this.isRouterAlive = false;
// 该方法会在dom更新后执行
this.$nextTick(function () { this.isRouterAlive = true })
}
}
}
</script> home.vue <script>
export default {
name: 'home',
// 注入reload, AppVue中注册
inject: ['reload'],
methods: {
// 退出登陆
logout: function () {
// 刷新
// location.reload()
// this.$router.go(0)
// 刷新当前页面
this.reload();
}
}
}
</script> 缺点:暂时比较不错的解决方案,重点控制`router-view`

VUE页面刷新问题的更多相关文章

  1. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  2. vue页面刷新数据丢失问题

    参考: https://blog.csdn.net/aliven1/article/details/80743470          https://blog.csdn.net/liang37712 ...

  3. vue:vue页面刷新vuex数据消失问题

    vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...

  4. 解决vue页面刷新或者后退参数丢失的问题

    原文链接: 点我 在商城类的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如 ...

  5. vue页面刷新重定向

    在App.vue中,添加如下代码: created(){ if(this.$router.path !== '/RealTimeMonitoring'){ this.$router.replace(' ...

  6. Vue页面刷新方法(子组件改变数据后兄弟组件刷新,不闪烁)

    todo https://blog.csdn.net/qq_40571631/article/details/91533248

  7. VUE的一个数据绑定与页面刷新相关的bug

    1.场景: N层嵌套的循环查询业务场景,框架是vue.其中在最后一层查完之后,还需要查其中每一项的两个属性,类型都是列表.查完之后将其赋值给一个变量用于页面展示.代码如下: (1)异常代码: getS ...

  8. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  9. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

随机推荐

  1. Linux 线程编程2.0——线程同步-互斥锁

    当我们需要控制对共享资源的存取的时候,可以用一种简单的加锁的方法来控制.我们可以创建一个读/写程序,它们共用一个共享缓冲区,使用互斥锁来控制对缓冲区的存取. 函数 pthread_mutex_init ...

  2. 【原创】【Android】揭秘 ART 细节 ---- Garbage collection

      背景 Dalvik :http://zh.wikipedia.org/wiki/Dalvik%E8%99%9A%E6%8B%9F%E6%9C%BA ART :http://source.andro ...

  3. ReactNative学习笔记(二)基础进阶

    一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...

  4. ZKWeb网页框架1.9正式发布

    1.9.0更新的内容有 更新项目工具 更好的支持Linux 添加工具函数 Exception.ToDetailedString (获取例外的详细信息) Exception.ToSummaryStrin ...

  5. 「PKUWC2018」随机游走(min-max容斥+FWT)

    「PKUWC2018」随机游走(min-max容斥+FWT) 以后题目都换成这种「」形式啦,我觉得好看. 做过重返现世的应该看到就想到 \(min-max\) 容斥了吧. 没错,我是先学扩展形式再学特 ...

  6. HDFS环境搭建(单节点配置)

    [参考文章]:hadoop集群搭建(hdfs) 1. Hadoop下载 官网下载地址: https://hadoop.apache.org/releases.html,进入官网根据自己需要下载具体的安 ...

  7. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. app自动化测试之实战应用(魅族计算器)

    模拟魅族计算器加法计算: from appium import webdriver desired_caps = {} desired_caps['deviceName'] = '621QECQ23D ...

  9. C# DataGridView下DataGridViewComboBoxColumn二级联动

    效果: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Da ...

  10. CSS 将一个页面平均分成四个部分(div)

    在项目中遇到需求,数据监控页面需要同时显示4个板块内容,如下图: CSS 如何将一个页面平均分成四个部分(div)呢? <!DOCTYPE html> <html lang=&quo ...