解决:VUE同一路由强制刷新页面

解决:VUE同一路由强制刷新页面解决:VUE同一路由强制刷新页面

大家好,又见面了,我是你们的朋友全栈君。

1. 思路

  • 使用this.$router.replace(),跳到一个空白页,然后this.$router.replace()重新跳回来
  • 使用this.$router.replace()的原因是,其实跟this.$router.push()效果一样,但是this.$router.replace()不会记录到history里,不留痕迹
  • 甚至不用打开空白页,直接用beforeRouteEnter拦截跳回原来页面

2. 实现过程

2.1 新建一个名为refresh.vue的文件

2.2 在refresh.vue里添加 beforeRouteEnter

<template> </template>
<script>
export default { 
   
  beforeRouteEnter(to, from, next) { 
   
    next(vm => { 
   
      vm.$router.replace(from.path)
      // 跳到该路由页面后,再替换为from.path来源路径
    })
  }
}
</script>

2.3 在路由文件里,加上refresh 的路由

    { 
   
      path: '/refresh',
      component: resolve => require(['@/pages/refresh'], resolve),
      meta: { 
   
        title: '用于同路由刷新'
      }
    }

2.4 当你想刷新当前页面的时候,可以调用下面这段代码

this.$router.replace('/refresh')

over,enjoy!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157499.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月11日 下午7:00
下一篇 2022年7月11日 下午7:00


相关推荐

  • 一线工程师告诉你嵌入式真实现状与发展前景「建议收藏」

    个人说明:本人并不是年薪百万的技术大牛,但总算是一名合格的嵌入式工程师,现在某企业担任嵌入式软件工程师开发一职,以下观点可能会带有片面或者分析不全,但却是一名一线企业嵌入式软件开发者真实感受和所得,希望能帮助那些有需要的人,我明白年轻人出来打拼都不容易。为何要写这片文章?小生也是过来人,踩过你们踩过的坑百度搜索“嵌入式”、“嵌入式开发”、“嵌入式发展前景”等字眼,出来的都是一大堆培训机构,…

    2022年4月4日
    75
  • label换行问题

    label换行问题1 单行完全显示 Label AutoSize true 2 换行显示 Label AutoSize false Label 框高度用户指定 3 多行显示 并且根据字数自动控制高度 Label AutoSize true Label MaximumSize newSize w 0 注 w 用户设定的宽度

    2026年3月17日
    1
  • 5.解决由于上下文太小导致的gateway命令行中的警告日志

    5.解决由于上下文太小导致的gateway命令行中的警告日志

    2026年3月13日
    3
  • webgame开发简明教程

    webgame开发简明教程 webgame开发简明教程(1)研究所有点缺乏资料啊。讨论的问题怪怪的。只有很少是能用到的。一、简单的程序框架。webgame程序构成:三大部分。第一是数据流程。第二是程序。第三是美术。其中,数据流程包括了功能。也只有在功能中才能体现数据流程。数据流程相当的麻烦,后面再讨论。比如最简单的卖买产品。要实现这个功能。那么需要有产品基础表、产

    2022年5月2日
    47
  • php sqrt函数,sqrt函数怎么使用「建议收藏」

    php sqrt函数,sqrt函数怎么使用「建议收藏」JavaScript中的sqrt函数是用于返回一个数的平方根,也就是开平方,下面的文章我们就来具体看一下sqrt函数的使用方法。我们来看一下sqrt函数的基本语法Math.sqrt(value)平方根数需要计算。返回作为参数传递的数字的平方根。需要注意的是:1、作为参数传递的非数字字符串返回NaN2、作为参数传递的多于1个整数的数组返回NaN3、作为参数传递的负数返回NaN4、作为参数传递的空字符…

    2022年6月6日
    36
  • Python 获取窗口句柄,模拟鼠标点击

    Python 获取窗口句柄,模拟鼠标点击一、效果图二、代码importwin32guiimportwin32apiimportpyautogui#frompymouseimportPyMousehwnd_title={}defget_all_hwnd(hwnd,mouse):if(win32gui.IsWindow(hwnd)andwin32gui.IsWindowEnabled(hwnd)andwin32gui.IsWindowVisible(hwnd)

    2022年7月21日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号