Vue中刷新页面的三种方式

一、通过js原始方法刷新

<template><div><div class="header"><button @click="update()">刷新页面</button></div></div>
</template><script>
export default {
data(){return{}
},
methods:{update(){location.reload()}
}
}
</script>

二、通过Vue自带的路由进行跳转

<template><div><div class="header"><button @click="update()">刷新页面</button></div></div>
</template><script>
export default {
data(){return{}
},
methods:{update(){this.$router.go(0)}
}
}
</script>

三、通过在APP页面进行demo进行刷新，不会像前两种那样出现短暂的闪烁效果，提升用户体验，通常可以使用这种方式

（1）、在APP页面中写入下面代码

<template><div id="app"><router-view v-if="isShow"/></div>
</template><script>
export default {name: 'App',provide(){return{reload:this.reload}},data(){return{isShow:true}},methods:{reload(){this.isShow=false;this.$nextTick(()=>{this.isShow=true})}}
}
</script>

（2）、在需要刷新的页面进行引入并使用

<template><div><div class="header"><button @click="update()">刷新页面</button></div></div>
</template><script>
export default {
data(){return{}
},
inject:['reload'
],
methods:{update(){this.reload()console.log('刷新页面')}
}
}
</script>

如果对您有用的话，别忘了给个三连，多谢多谢

Vue中刷新页面的三种方式相关推荐

Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一.原生js刷新方式: location.reload(); 二.Vue框架自带的路由跳转方式: this.$router.go(0); 三.在App.vue页面声明 ...
Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vu ...
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
android获取自定义属性,android 自定义控件中获取属性的三种方式(转)
第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 android:layout_width="f ...

Vue中刷新页面的三种方式

一、通过js原始方法刷新

二、通过Vue自带的路由进行跳转

三、通过在APP页面进行demo进行刷新，不会像前两种那样出现短暂的闪烁效果，提升用户体验，通常可以使用这种方式

Vue中刷新页面的三种方式相关推荐

最新文章

热门文章