解决: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python自定义异常和主动抛出异常(raise)

    python自定义异常和主动抛出异常(raise)前言有时候python自带异常不够用,如同java,python也可以自定义异常,并且可以手动抛出。注意,自定义异常只能由自己抛出。python解释器是不知道用户自定义异常是什么鬼的。raise语句主动抛出异常。格式:主动抛出异常终止程序raise异常名称(‘异常描述’)raiseRuntimeError(‘testError’)主动抛出这个异常,并加以解释。自定义异常pytho

    2022年10月17日
    1
  • 传奇sf架设服务器_传奇怎么架设服务器

    传奇sf架设服务器_传奇怎么架设服务器传世SF私服搭建架设教程下载!传奇世界私服搭建教程2017是传世SF私服搭建教程!提供传奇世界h5一键服务端商业版+架设教程-服务器端!传世SF私服游戏介绍传奇世界单机版,小编第一次接触传奇世界是在03年,过去这么多年,发现这款经典游戏竟然还有生命力,在这里给大家整合了网友提供的最新单机版,辅助大家回味高中时代那些青涩的回忆。此单机版很给力。根据官网提供的版本制作,拥有全部的最新地图以及技能怎…

    2022年10月5日
    4
  • 365xav.cf/forum.php,jupyterlab-latex

    365xav.cf/forum.php,jupyterlab-latex#THISISANAUTOGENERATEDFILE.DONOTEDITTHISFILEDIRECTLY.#yarnlockfilev1″@babel/code-frame@^7.0.0″:version”7.8.3″resolved”https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3….

    2022年9月28日
    3
  • linux upx脱壳工具,最新UPX加脱壳工具简单修改版

    linux upx脱壳工具,最新UPX加脱壳工具简单修改版SECURITY_ATTRIBUTES.nLength=12SECURITY_ATTRIBUTES.lpSecurityDescriptor=0SECURITY_ATTRIBUTES.bInheritHandle=真CreatePipe(hRead,hWrite,SECURITY_ATTRIBUTES,0)STARTUPINFO.cb=68STARTUPINFO.dwFla…

    2022年7月19日
    31
  • vue的双向绑定原理及实现_vue的数据绑定怎么实现

    vue的双向绑定原理及实现_vue的数据绑定怎么实现vue双向绑定原理浅析1、什么是双向绑定?​ 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据。(数据变化更新视图,视图变化更新数据)2、如何实现双向绑定?在vue中可以通过v-model实现双向绑定<template><divid=”app”>{{username}}<br/><inputtype=”text”v-model=”username”&

    2022年10月18日
    2
  • STM32F103 AFIO时钟疑问

    STM32F103 AFIO时钟疑问

    2022年3月3日
    48

发表回复

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

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