如何实现Vue中同一路由的强制页面刷新功能？

本文共计436个文字，预计阅读时间需要2分钟。

目录

1.思路

2.实现过程

2.1 创建一个名为refresh.vue的文件 2.2 在refresh.vue中添加beforeRouteEnter 2.3 在路由文件中添加refresh的路由 2.4 当你想刷新当前页面时，可以调用下面这段代码

目录

• 1. 思路
• 2. 实现过程
• 2.1 新建一个名为refresh.vue的文件
• 2.2 在refresh.vue里添加 beforeRouteEnter
• 2.3 在路由文件里，加上refresh 的路由
• 2.4 当你想刷新当前页面的时候，可以调用下面这段代码

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路由强制刷新页面内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！