Vue同一路由强制刷新页面的实现过程
更新时间：2022年08月15日 11:26:59 作者：Scoful
这篇文章主要介绍了解决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！
到此这篇关于VUE同一路由强制刷新页面的文章就介绍到这了,更多相关vue路由强制刷新页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
vue封装可复用组件confirm,并绑定在vue原型上的示例
今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue使用vue-draggable的全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
上传图片不管是后台还是前端小程序，上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片，每个页面都写一个非常不方便，本文就给大家介绍vue如何封装一个上传多张图片的组件,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
在日常开发中,我们经常使用localStorage来存储一些变量,这些变量会存储在浏览中,对于localStorage来说,即使关闭浏览器,这些变量依然存储着,方便我们开发的时候在别的地方使用,本文就给大家介绍Vue如何监听localstorage的变化,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家分享的是Vue组件传值的几种常用方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了vue模式history下在iis中配置流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
Vue 最独特的特性之一,是其非侵入性的响应式系统。下面这篇文章主要给大家介绍了关于vue响应式原理与双向数据的相关资料,需要的朋友可以参考下2021-06-06
最新评论