VUE同一路由强制刷新页面

VUE同一路由强制刷新页面

3月 7, 2024 阅读 1039 字数 1089 评论 0 喜欢 0

#### 目录

* [1\. 思路](https://cloud.tencent.com/developer?from_column=20421&from=20421)
* [2\. 实现过程](https://cloud.tencent.com/developer?from_column=20421&from=20421)
* * [2.1 新建一个名为refresh.vue的文件](https://cloud.tencent.com/developer?from_column=20421&from=20421)
* [2.2 在refresh.vue里添加 beforeRouteEnter](https://cloud.tencent.com/developer?from_column=20421&from=20421)
* [2.3 在路由文件里,加上refresh 的路由](https://cloud.tencent.com/developer?from_column=20421&from=20421)
* [2.4 当你想刷新当前页面的时候,可以调用下面这段代码](https://cloud.tencent.com/developer?from_column=20421&from=20421)

1\. 思路
——

* 使用this.router.replace(),跳到一个空白页,然后this.router.replace()重新跳回来
* 使用this.router.replace()的原因是,其实跟this.router.push()效果一样,但是this.
* 甚至不用打开空白页,直接用`beforeRouteEnter`拦截跳回原来页面

2\. 实现过程
——–

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

### 2.2 在refresh.vue里添加 beforeRouteEnter

“`


“`

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

“`
{

path: ‘/refresh’,
component: resolve => require([‘@/pages/refresh’], resolve),
meta: {

title: ‘用于同路由刷新’
}
}
“`

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

“`
this.$router.replace(‘/refresh’)
“`

over,enjoy!

© 2017-2024 微煦 豫ICP备18034278号-1