1). location方式
  1. location.reload()
  2. 缺点:刷新页面,卡白
2). router方式
  1. this.$router.go(0)
  2. 缺点:同一问题,比一好点
3). provide/inject方式
  1. App.vue
  2. <router-view v-if="isRouterAlive"></router-view>
  3. <script>
  4. export default {
  5. name: 'App',
  6. // 提供reload方法
  7. provide: function () {
  8. return {
  9. reload: this.reload
  10. }
  11. },
  12. // isRouterAlive控制显示
  13. data: function () {
  14. return {
  15. isRouterAlive: true
  16. }
  17. },
  18. methods: {
  19. // 刷新方法
  20. reload: function () {
  21. this.isRouterAlive = false;
  22. // 该方法会在dom更新后执行
  23. this.$nextTick(function () { this.isRouterAlive = true })
  24. }
  25. }
  26. }
  27. </script>
  28. home.vue
  29. <script>
  30. export default {
  31. name: 'home',
  32. // 注入reload, AppVue中注册
  33. inject: ['reload'],
  34. methods: {
  35. // 退出登陆
  36. logout: function () {
  37. // 刷新
  38. // location.reload()
  39. // this.$router.go(0)
  40. // 刷新当前页面
  41. this.reload();
  42. }
  43. }
  44. }
  45. </script>
  46. 缺点:暂时比较不错的解决方案,重点控制`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. js-function作用域

    你能猜出先弹出什么吗? <!DOCTYPE html> <html lang="en"><head> <meta charset=&quo ...

  2. 项目Alpha冲刺(团队3/10)

    项目Alpha冲刺(团队3/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  3. 三种方法在当前目录下打开cmd命令窗口

    概述 运行npm的时候,每次都要cd到目录,很麻烦,所以总结了三种在当前目录下直接打开cmd窗口的方法,供以后开发时参考,相信对其他人也有用. 方法一 在当前目录按住shift再右键. 会看到右键菜单 ...

  4. HoloLens开发手记-凝视 Gaze

    在全息应用中,凝视是第一种输入形式,被用于定位物体(功能和PC的光标指针类似).凝视告诉你用户正在看向世界中的位置,让你能够确定他们的意图.在现实世界中,你通常会盯着你打算与之交互的物体.这种方式与凝 ...

  5. 机器学习(Machine Learning)算法总结-决策树

    一.机器学习基本概念总结 分类(classification):目标标记为类别型的数据(离散型数据)回归(regression):目标标记为连续型数据 有监督学习(supervised learnin ...

  6. C# DataGridView下DataGridViewComboBoxColumn二级联动

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

  7. Studying

    美团spark实践:http://tech.meituan.com/spark-in-meituan.html CDH5.6.0-HBase1.0.0:http://archive.cloudera. ...

  8. js实现深拷贝的一些方法

    在ECMAScript变量中包含两种不同类型的值:基本类型值和引用类型值. 基本类型值:Undefined.Null.Boolean.Number.String 引用类型值:Object.Array. ...

  9. 构建Docker Compose服务堆栈

    1.安装了docker-compose,现在我们要使用docker-compose来运行容器栈.这个地方会有两个容器,一个容器中使用Flask搭建的简单应用,另一个容器是Redis,Flash会向re ...

  10. linux装tomcat遇到的坑

    最开始通过apt-get安装,各种毛病 然后下载tar.gz压缩包解压使用,运行startup.sh可以启动,但是看日志发现 Tomcat启动时卡在 INFO HostConfig.deployDir ...