Vue刷新页面的三种方式

发布时间:2021-06-23 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了Vue刷新页面的三种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.原生的js刷新方式:

location.reload();

2.vue自带的路由跳转方式:

this.$router.go(0);

使用过后发现这俩种方式都会使页面有短暂的空白,体验效果不是特别好所以总结出了第三种方式

3. 在app或者路由插槽处声明以下代码:

<template>

<div id="app">

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

</div>

</template>

<script>

export default {

name: 'App',

provide() {

// 父组件中通过provide来提供变量,在子组件中通过inject接受

return {

reload: this.reload

}

},

data() {

return {

isShow: true

}

},

methods: {

reload() {

// reload方法首先将isShow设置为false,将router-view通过if判断取消

this.isShow = false

// Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。

this.$nextTick(function() {

// 在页面更新后再将isShow设置为true

this.isShow = true

})

}

}

}

</script>

在组件中设置刷新

export default {

inject:['reload'],// 此处引入在app中定义的reload方法

data () {

return {

}

}

},

在页面中需要页面刷新的地方调用即可

this.reload();

原文链接:https://blog.csdn.net/tangyuan0217/article/details/116052003

总结


以上是前端之家为你收集整理的Vue刷新页面的三种方式全部内容,希望文章能够帮你解决Vue刷新页面的三种方式所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。