怎么在vue中实现主动刷新

　　介绍

今天就跟大家聊聊有关怎么在vue中实现主动刷新,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1. window.location.reload(),是原生JS提供的方法,这个。美元router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。

2。通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来:

当前页面:

& lt; template> 　　,& lt; div> 　　,& lt; el-button 类型=皃rimary",类=癰tn", @click=癰tnaction"在摁我刷新页面& lt;/el-button> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　默认,export  { 　　,数据(){ 　　返回{才能 　　,,} 　　}, 　　,安装(){ 　　}, 　　,方法:{ 　　btnaction才能(),{//,,location.reload ()//,,,,,,,,美元router.go (0) 　　,,,,,,,,美元router.replace ({ 　　,,,,,,,,路径:& # 39;/空# 39; 　　,,,,,,,,名字:& # 39;空# 39; 　　,,,,,,,}) 　　,,} 　　,} 　　,} 　　& lt;/script>

空白页面:

& lt; template> 　　,& lt; h2> 　　,空页面 　　,& lt;/h2> 　　& lt;/template> 　　, 　　& lt; script> 　　默认,export  { 　　,数据(){ 　　返回{才能 　　,, 　　,,} 　　}, 　　,创建(){ 　　美元。才能router.replace ({ 　　,,,,,,,,路径:& # 39;/& # 39; 　　,,,,,,,,名字:& # 39;父亲# 39; 　　,,,,,,,}) 　　,} 　　,} 　　& lt;/script>

当点击按钮时地址栏会有快速的地址切换过程.

3 .控制& lt; router-view> & lt;/router-view>的显示与否,在全局组件注册一个方法,该方法控制router-view的显示与否,在子组件调用即可:

应用程序。vue

& lt; template> 　　,& lt; div  id=癮pp"比; 　　& lt;才能router-view  v=癷sRouterAlive"祝辞& lt;/router-view> 　　,& lt;/div> 　　& lt;/template> 　　, 　　& lt; script> 　　export  default  { 　　,名字:& # 39;应用# 39; 　　,提供(){//大敌;注册一个方法 　　return {才能 　　,,重载:this.reload 　　,,} 　　}, 　　,数据(){ 　　return {才能 　　,,isRouterAlive:真实 　　,,} 　　}, 　　,方法:{ 　　重新加载才能(),{ 　　,,this.isRouterAlive =false 　　这。才能nextTick美元(函数(),{ 　　,,,this.isRouterAlive =,真的 　　,,,console.log(& # 39;重载# 39;) 　　,,}) 　　,,} 　　,} 　　} 　　& lt;/script>

当前组件:

& lt; template> 　　,& lt; div> 　　,& lt; el-button 类型=皃rimary",类=癰tn", @click=癰tnaction"在摁我刷新页面& lt;/el-button> 　　,& lt;/div> 　　& lt;/template> 　　, 　　& lt; script> 　　默认,export  { 　　,注入:[& # 39;重载# 39;],,//,引入方法 　　,数据(){ 　　返回{才能 　　,,} 　　}, 　　,组件:{ 　　}, 　　,安装(){ 　　}, 　　,方法:{ 　　btnaction才能(),{//,,location.reload ()//,,,,,,,,美元router.go (0)//,,,,,,,,美元router.replace ({//,,,,,,,,路径:& # 39;/空# 39;//,,,,,,,,名字:& # 39;空# 39;//,,,,,,,}) 　　,,,,,,,this.reload(),//,调用方法 　　,,} 　　,} 　　,} 　　& lt;/script> 为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

看完上述内容,你们对怎么在Vue中实现主动刷新有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

怎么在vue中实现主动刷新