首页 > 其他分享 >Vue无感刷新当前页面

Vue无感刷新当前页面

时间:2023-07-12 19:11:06浏览次数:40  
标签:Vue javascript reload 刷新 无感 页面

使用 Vue 选项/组合 Api provide / inject Api 地址,此方法可以实现无感刷新并且不会出现闪烁的空白。

  1. 首先在根组件 App.vue 定义这个方法
  html 复制代码
<template>
    <div id="app">
        <router-view v-if="routerAlive"></router-view>
    </div>
</template>
  javascript 复制代码
export default {
    //暴露 reload 这个方法,方便组件调用
    provide() {
        return {
            reload: this.reload,
        }
    },

    data() {
        return { routerAlive: true }
    },

    methods: {
        //重新加载的方法
        reload() {
            this.routerAlive = false
            this.$nextTick(function () {
                this.routerAlive = true
            })
        },
    },
}
  1. 这样就可以在你要刷新的页面组件调用这个方法
  javascript 复制代码
export default {
    inject: ["reload"],
    ......

    methods:{
        handleReload(){
            //在你要用到的地方调用这个重新刷新的方法
            this.reload()
        }
    }
}
  1. 最后如果不考虑用户体验的话,也可以用下面的方法:
  javascript 复制代码
// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()

标签:Vue,javascript,reload,刷新,无感,页面
From: https://www.cnblogs.com/clwydjgs/p/17548576.html

相关文章

  • 记录--你知道Vue中的Scoped css原理么?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助追忆Scoped偶然想起了一次面试,二面整体都聊完了,该做的算法题都做出来了,该背的八股文也背的差不多了,面试官频频点头,似乎对我的基础和项目经验都很是满意。嗯,我内心os本次面试应该十拿九稳了。突然,面试官说:「我的......
  • Vue3 实现点击菜单实现切换主界面组件
    子组件菜单组件 MenuComponent列表组件 ExtTelListComponent状态组件 ExtTelStatusComponent父组件界面主体MainIndex 实现功能:在 MainIndex中引入三个子组件 通过点击 菜单组件切换加载 列表组件和状态组件 实现效果一、菜单组件 MenuComponent<......
  • Vue bug from backend
    一个后端引发前端的BUG使用的框架是vue代码里面有一个获取后台数据this.data=awaitfetch()table里面是一些可以编辑的inputconstdataMock=[{id:3,input:''}]大概是一个这样的数据结构一切正常一段时间后,代码不正常了,但是前端这边没有更改通过Vue开发者工具......
  • vue2 + elementUI + sortablejs 实现可行拖拽排序表格
    需要实现表格(可以新增行,表格中直接编辑数据,行可上下拖动重新排序)实现效果(整行上下拖动之后,序号变化为1,2,3.......,可根据名称看效果哦):初始表格: 拖拽后:1.安装拖拽插件npminstallsortablejs--save页面中引入importSortablefrom'sortablejs'2.页面el-table......
  • Windows系统使用Nginx部署Vue
    Nginx是什么?Nginx(enginex)是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。优点速度更快、并发更高......
  • vue 打开浏览器新标签页预览 pdf 和 txt 文档,以及新标签页标题修改
    1//在线查看2showOnline({id,fileExt,fileName}){3if(fileExt&&['jpg','jpeg','gif','bmp','png'].includes(fileExt.toLowerCase())){4download(`/file-item/${id}/downl......
  • 如何解决使用 router.push 跳转路由第二次之后页面就不会刷新了
    router.push({name:"monitor",query:{deviceid:"1676156672197922816",//设备IDisOpen:"true",//是否跳转事件date:newDate().getTime()//解决第二次使用push跳转路由页面不刷新}})在传递参数的时候加上 date:......
  • Vue3+.net6.0 六 条件渲染
    v-if,v-else-if,v-else控制元素是否渲染,不满足条件的时候不会有相应元素。<divv-if="type==='A'">A</div><divv-else-if="type==='B'">B</div><divv-else-if="type==='C'">C&l......
  • vue3自定义指令 拖拽 与拖拽变大小
    directives:{drag:{mounted:(el,binding)=>{constdragDom=el;conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);el.parentElement.style.cursor='move';......
  • Vue3+.net6.0 五 类和样式绑定
    Vue3关于样式的处理跟Vue2是一样的,常用的有以下几种。1.绑定属性html部分:<div:class="{active:isActive}"></div>js部分:data(){return{isActive:true}}当isActive值为true时,div应用这个active样式,反之亦然。 2.对象方式绑定<div:class="cla......