首页 > 其他分享 >vue刷新当前页面(App.vue)

vue刷新当前页面(App.vue)

时间:2023-03-01 17:47:31浏览次数:38  
标签:vue App isRouterAlive reload 刷新 true 页面

vue刷新当前页面有挺多种方法,比如

window.location.reload()

或者

this.$router.go(0)

但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法

在app.vue的<router-view></router-view>加上v-if属性

<router-view v-if="isRouterAlive"></router-view>

在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true

  data () {
      return {
        isRouterAlive: true
      }
  }

methods里面加入一个刷新的方法

methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function() {
         this.isRouterAlive = true
      })
    }
  }

最后,需要把这个函数 provide 出去

provide () {
    return {
      reload: this.reload
    }
  }

这样,app.vue上就设置完了

那么当我们需要刷新的时候,在需要的页面上加上这个函数就可以了

首先注入这个函数

inject: ['reload']

然后在需要用到这个函数的地方去引用就行了

refresh () {
  this.reload()
}

这样子就可以刷新页面了,而且不会出现白屏的情况,比前面两种方法好用,推荐大家使用。

附带上完整代码

<template>
  <div id="app">
    <div class="wrap">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </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>
  #app{
    position: relative;
  }
  @media only screen and (min-width: 1200px) {
    .wrap{
      width: 65%;
      margin: 0 auto;
    }
  }
  
</style>

<template>
    <button @click="refresh"></button>
</template>
<script>
    export default{
        name: 'refresh',
        inject: ['reload'],
        methods: {
              refresh () {
                  this.reload()
              }
        }
    }
</script>


作者:翔阿翔阿翔
链接:https://www.jianshu.com/p/b6d7db35b6e4

标签:vue,App,isRouterAlive,reload,刷新,true,页面
From: https://www.cnblogs.com/kakashi-feng/p/17169079.html

相关文章

  • “一网统管”视频融合平台EasyCVR页面tab切换细节优化
    EasyCVR视频融合平台基于云边端协同架构,能支持海量视频的轻量化接入与汇聚管理,借助大数据分析的决策判断,为网络摄像头、网络存储设备、智能终端、无人机、车载设备、移动执......
  • 微信小程序:登录页面模板
    微信小程序:登录页面模板wxml:<viewclass="v1"><!--v2父容器子view使用绝对布局--><viewclass="v2"><viewclass="dltext">登录</view><!--......
  • vue实现全部防抖
    //全局注册防抖Vue.component("ElButton").mixin({ data(){  return{   debounce:false  } }, methods:{  //覆盖el-button的点击......
  • vue3的ref、reactive、toRefs特性详解
    了解ref()、reactive()这两个特性之前,我们先回顾一下vue2中data和method方法。在vue2中我们定义一个响应式变量name,通过点击事件handle来改变name的值是通过如下方式写的。......
  • Vue3 reactive的理解
    1.什么是reactive?reactive是Vue3中提供实现响应式数据的方法.在Vue2中响应式数据是通过defineProperty来实现的.而在Vue3响应式数据是通过ES6的Proxy来实现的2.rea......
  • h5唤起APP
    functiontryOpenApp(){event.stopPropagation();statisimage("49.145.1295",3);varandroidurl='jiayuan://com.jiayuan?from_scheme=true'......
  • 前端框架vue中的v-on和v-bind的区别
    1.v-on指令监听DOM事件,并在触发时运行一些JavaScript代码"v-on:"的语法糖为"@",语法糖就是简写的意思。例如:<!--事件处理函数--><divid="app"> <!--语法:v-on:事......
  • VUE2 表单
    <form>-<input>-<label>-v-model<form@submit="confirm"><labelfor="account">账号:</label><!--用来获取焦点,点击“账号:”后可以选中input框,它里面的fo......
  • vue+leaflet示例:在线地图切换显示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1......
  • EBS Form Builder:app_field.clear_dependent_fields和APP_FIELD.set_dependent_field
    用途:可以调用APP_FIELD.clear_dependent_fields和APP_FIELD.set_dependent_field来将两个(或多个)Item建立关联,当一个为空时,另一个不可录入,反正,可录入,且父ItemField变化......