vue刷新本页面

顶层app.vue页面

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

</script>

要刷新的页面代码

export default {
  inject: [‘reload‘],
  data() {
    return {

    }
  },
     methods: {
        handleReload(){
            this.reload();
        }
    },   

}            

就这样,可以愉快的刷新页面了。此刷新并不会改变vuex状态。

原文地址:https://www.cnblogs.com/zhuzeliang/p/8872603.html

时间: 2024-11-01 17:17:11

vue刷新本页面的相关文章

URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

vue刷新当前页面,11选5平台维护

在vue管理后台中,11选5平台维护(企 娥:217 1793 408)表格经常会有增删改查,修改完之后就要刷新页面或者调方法,但是在权限菜单角色页面,你如果改变当前登录的账号的权限时,你就需要全局刷新,然而好多方法并没有在当前页,所以比较麻烦,如果用this.$router.go(0),会强制刷新比较丑,所以就得允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效 1.根组件APP.vue里面,写入刷新方法,路由初始状态是显示的 <templa

vue项目如何刷新当前页面

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

Vue+WebSocket 实现页面实时刷新长连接

Vue+WebSocket 实现页面实时刷新长连接:https://www.cnblogs.com/fmixue/p/9110074.html 看完让你彻底搞懂Websocket原理:https://blog.csdn.net/frank_good/article/details/50856585 webSocket长连接实现demo(场景:扫码自动跳转登录,或者替换轮询):https://blog.csdn.net/GordoHu/article/details/78293803 原文地址:h

vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

provide + reload 实现vue 不刷新浏览器,页面自刷新

// 修改vue APP.vue文件 <template> <div id="app"> // 先将router-view 添加v-if或者v-show方法 通过控制显示和隐藏起到刷新页面的效果 <router-view v-if="isRouterAlive" /> </div> <template> <script> export default { provide() { return {

Vue. 之 刷新当前页面,重载页面数据

Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 script代码块添加:watch模块,如下代码: ... ... mounted : function() { this.loadData(); }, watch: { //监听相同路由下参数变化的时候,从而实现异步刷新 '$route'(to,from) { this.loadData(); }, },

vue修改数据,刷新当前页面,重新渲染页面数据

业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide / inject 这对用例.(其他方法:this.$router.go(0),会强制刷新,出现空白页面体验不好): 原理是:通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果. 代码如下: 1:在父组件中加入 <template> <div id=&qu

vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 对于路由,不同的路由跳转,vue会帮我们刷新路由,但是我今天要说的是,同一路由刷新我们的解决方法. 问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头