vue页面刷新方法_vue返回上一页怎么实时刷新

vue页面刷新方法_vue返回上一页怎么实时刷新一、通过js原始方法刷新<template><div><divclass=”header”><button@click=”update()”>刷新页面</button></div></div></template><script>exportdefault{data(){return{}},methods

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、通过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>

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183315.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(3)


相关推荐

  • c语言s16与u16_c语言中u8和u16是啥

    c语言s16与u16_c语言中u8和u16是啥在C语言中,并没有U16和S16这两种基本类型。不过在C语言的编程习惯上,往往为了简写,约定U16和S16两种类型。尤其常见于嵌入式编程或驱动编程上。其中U16为16位无符号数,S16为16为有符号数。定义如下:typedefshortS16;typedefunsignedshortU16;可以看到,U16和S16都是占2个字节的整型类型,区别只是是否有符号。于是U16可…

  • vim的配置[通俗易懂]

    vim的配置[通俗易懂]1.什么是vimvim是Linux下一种常用的编译器,但是和VS相比,它确实有点low了,但是呢,我们可以通过配置,把它变的和VS一样好用。下面就介绍一下简单的配置。2.vim的简单配置在root下,

  • Linux用ps命令查找进程PID再用kill命令终止进程的方法「建议收藏」

    Linux用ps命令查找进程PID再用kill命令终止进程的方法「建议收藏」随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)使用linux操作系统,难免遇到一些软件”卡壳”的问题,这时就需要使用linux下强大的kill命令来结束相关进程。这在linux系统下是极其容易的事情,你只需要killxxx即可,这里xxx代表与此软件运行相关…

    2022年10月20日
  • Nginx部署Vue项目以及解决刷新页面404问题「建议收藏」

    Nginx部署Vue项目以及解决刷新页面404问题

  • ubuntu 18.04 安装桌面_已安装更新版本的onedrive

    ubuntu 18.04 安装桌面_已安装更新版本的onedrive问题在Ubuntu18.04上安装Onedrive问题背景对于文档的同步,还是喜欢用Onedrive,主要因为Onedrive对文档的在线编辑支持很好。Onedrive初始免费容量5G,加上某宝2块钱买的邀请永久扩容10G,总共15G,够我用了。因为有时候需要在实验室的电脑记记笔记,所以问题由此产生。解决办法Ubuntu上的Onedrive貌似没有图形化界面,我安装的是Onedriv…

  • 详述如何退出 Vim 编辑器

    详述如何退出 Vim 编辑器Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,其在Vi的基础上改进和增加了很多特性。怎么说呢?学习如何用Vim进行文本编辑应该算是程序员的必备技能之一啦!But,很多同学在使用Vim进行文本编辑的时候却不知道如何退出Vim编辑器,这就有些尴尬啦!因此,在本文中,详细列出如何Vim编辑器的方法,希望对大家有些帮助。首先,点击Esc键,Vim进入命令模式。然

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号