vue怎么在刷新前调用一个方法

Posted 2023-03-15

1、最直接整个页面重新刷新

location. reload()
this.$router.go(0)
这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。

2、新建一个空白页面

新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。
provide / inject 组合

这是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue
通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了

isRouterAlive //true or false 来控制 参考技术A 1.修改 App.vue，代码如下：
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </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>
重点如下图所示：

2.到需要刷新的页面使用 inject 进行导入并引用 reload：

3.在需要进行调用的方法中调用 this.reload() 即可