vue 如何实现页面操作之后自动刷新

这篇具有很好参考价值的文章主要介绍了vue 如何实现页面操作之后自动刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题。

需要在app.vue文件按照如下代码设置

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
    name: "App",
    provide(){
      return{
        reload:this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true,
      };
    },
    methods: {
      reload(){
          this.isRouterAlive = false,
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
      }
    }
};
</script>

<style> 
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    widows: 100%;
    height: 100%;
}
</style>

然后在具体的页面的export default中,新增下面一行设置

inject:['reload'],

 然后在其他接口调用完毕之后,执行下面语句,也就是你想在什么操作之后进行刷新重载页面,加上下面这行代码

this.reload()

实际执行的是你这个页面上的   created() 创建页面的语句文章来源地址https://www.toymoban.com/news/detail-503987.html

到了这里,关于vue 如何实现页面操作之后自动刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vite实现版本更新检查,实现页面自动刷新

    前端版本更新检查,实现页面自动刷新 使用 vite 对项目进行打包,对 js 和 css 文件使用了 chunkhash 进行了文件缓存控制,但是项目的 index.html 文件在版本频繁迭代更新时,会存在被浏览器缓存的情况。 在发版后,如果用户不强制刷新页面,浏览器会使用旧的 index.html 文件,在

    2024年02月09日
    浏览(43)
  • vue keep-alive(1):vue router如何保证页面回退页面不刷新

    在构建SPA应用时,经常遇到的场景就是列表页面 跳转到详情页,但是详情页面回退到列表页面,列表页面有重新刷新了。 如何保证回退的时候不刷新页面呢?keep-alive是一个非常好的解决方案(当然你也可以以子路由,以绝对定位形势覆盖上去*_*)。 keep-alive是Vue的内置组件

    2024年02月08日
    浏览(42)
  • PHP:提交表单之后出现本页面刷新的情况,导致路径参数消失

    问题: 提交表单前 提交表单后 刷新之后,参数消失    解决办法 在提交表单的方法中写入代码携带参数的代码 样例:  实施

    2024年02月12日
    浏览(44)
  • 如何实现网页当前页面刷新功能

    类似于这样的页面 实现思路如下: 首先我们在pinia中定义一个刷新状态的字段,点击按钮的时候,改为相反的值 对主页面的路由跳转Router-view绑定一个v-if,它绑定一个自定义的一个响应的参数,我们在主页面监听pinia的刷新状态数据,如果它发生变化,就把定义的响应参数改

    2024年01月22日
    浏览(48)
  • VUE实现当前页面刷新的七种方法

            使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。         在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如下的方法:         然后在模板中调用该方法即

    2024年02月16日
    浏览(44)
  • 【Vue】实现当前页面刷新的四种方法

    这两周在写一个后台管理,每次调用接口实现增删改查的过程中,都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差,而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的bug了。那么,顺着这个问题,一通搜寻下

    2023年04月26日
    浏览(54)
  • VUE路由跳转并刷新页面(框架层实现)

    前言         网上找了很多办法,都需要开发者在页面内单独实现,或者是刷新整个浏览器,感觉并不是特别舒服。因此,我考虑可以在框架层去实现路由跳转刷新。         思路如下:                 1、重定向至临时界面(用户无感知)                 2、打开临时

    2024年02月11日
    浏览(56)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案二:轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 根据打完包之后生成的 script src 的hash值去判断 ,每次打包都会生成唯一的hash值,只要轮

    2024年01月23日
    浏览(43)
  • vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)

            1.在路由(router/index.js)中,对不刷新的页面设置:         2.在app.vue中设置: 这时返回就不会触发created和mounted         1.在data中定义         2.挂载: 以上就实现了返回页面后滚动条记忆的功能啦! 如果想实现分情况决定是否记忆滚动条以及刷新组件数据

    2024年02月08日
    浏览(47)
  • Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决

    我的项目在 build 之后就插入到我的主网站的 /tools/image 路径下使用的,并非主网站,所以需要配置两个地方: 添加 base,意思是 build 之后的外部资源都从当前目录的相对路径获取。 比如 main.js 不是 /main.js 而是 ./main.js 我不知道是什么原理哈,反正是管用,之前在没有使用

    2024年02月13日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包