Vue项目点击刷新页面的三种方式

一、原生js刷新方式：

location.reload();

二、Vue框架自带的路由跳转方式：

this.$router.go(0);

三、在App.vue页面声明以下代码：

<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设置为truethis.isShow = true})}}
}
</script>

在组件中设置刷新：

export default {inject:['reload'],//  此处引入在app中定义的reload方法data () {return {}}
},

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

this.reload();

总结： 前两种方式虽然也可以刷新，但是点击按钮刷新的时候，页面会有短暂的空白，体验效果不是很好，所以推荐第三种方法供大家参考

Vue项目点击刷新页面的三种方式相关推荐

Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vu ...
Vue中刷新页面的三种方式
一.通过js原始方法刷新 <template><div><div class="header"><button @click=" ...
vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
Vue 监听路由变化的三种方式
方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{$route(to,from){console.log(to.path);} }, 或 // 监听,当路由发生变化的时候执 ...
在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 include指令告诉容器:复 ...
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...
php重定向页面的三种方式
PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...

Vue项目点击刷新页面的三种方式

Vue项目点击刷新页面的三种方式

一、原生js刷新方式：

二、Vue框架自带的路由跳转方式：

三、在App.vue页面声明以下代码：

Vue项目点击刷新页面的三种方式相关推荐

最新文章

热门文章