vue 如何实现页面操作之后自动刷新

近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题。

需要在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>

<style> 
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    widows: 100%;
    height: 100%;
}
</style>

然后在具体的页面的export default中,新增下面一行设置

inject:['reload'],

 然后在其他接口调用完毕之后,执行下面语句,也就是你想在什么操作之后进行刷新重载页面,加上下面这行代码

this.reload()

实际执行的是你这个页面上的   created() 创建页面的语句

猜你喜欢

转载自blog.csdn.net/qq_26479645/article/details/126859315