avatar

vue刷新当前页面

背景

vue 写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下,既然用接口交互,那肯定就是 axios 的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了),所以就有了动态路由。在使用动态路由配置 /detail/:id 这样的情况下,由于 router-view 是复用的,单纯的改变id的值并不会刷新 router-view 所以就要想一个办法,让后台执行完操作后,给前台返一个操作结果,然后前台手动刷新页面,一开始我想到的是用 window.location.reload() 或者 this.$router.go(0) 这两个方法,但是后来发现这两个方法消耗都很大,用户体验并不太好,违背了 vue-router 的初衷,所以就放弃了,看了下别人的做法,整理下面两种方法:

第一种:中转站的方式

用一个空白组件在每次操作之后进行跳转,相当于Nginx的反向代理一样。意思就是让每次操作完成以后,都让路由跳转到这个中转站页面,然后这个页面获取到进来路由的路径再返回去就可以了。这种方式如果说你的路由是显性的,就是直接显示在浏览器地址栏,你会发现,一直在换,而我目前使用的则是第二种方式。

第二种:provide / inject 的方式

通过 provideApp.vue 为所有子组件注入一个 reload 方法,然后在需要使用的页面,通过 inject 注入即可、请看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>

<script>
export default {
name: "App",
provide() {
return {
reload: this.reload
};
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>

在需要调用的子页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<!--你的子页面布局-->
</template>

<script>
export default {
//...
inject: ['reload'],
methods: {
delData(){
//在axios成功的回调里面
this.reload();
}
}
//...
}
</script>
文章作者: Kwin
文章链接: http://kw1n.cn/2020/03/27/20200327-vue刷新当前页面/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kwin 's Blog
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论