浅析vue中怎么刷新当前页面

PHP中文网 • 2025年4月1日 16:44:05 • 编程技术 • 阅读 1

vue怎么刷新当前页面？下面本篇文章给大家介绍一下vue刷新当前页面的几种实现方法，希望对大家有所帮助！

项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.

思路

(1)如果页面简单,调用接口刷新数据即可.

(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式下面整理了3种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点

实现

方式1-通过location.reload和$router.go(0)方法

立即学习“前端免费学习笔记（深入）”；

(a)概述

通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面

优点:足够简单

缺点:会出现页面空白,用户体验不好。【相关推荐：vuejs视频教程、vuejs视频教程】

(b)代码

                Document            * {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3dce6; }.main { flex: 1; }                    
//框架页let Layout = {    created() {        console.log('框架页加载')    },    template: `                    左侧菜单
                
        
    `}//首页let Home = {    template: `                    首页                    
    `,    created() {        console.log('首页加载')    },    methods: {        onClick(){            // 通localtion.reload或者this.$router.go(0)实现整体刷新页面,会出现页面闪烁            // location.reload()            this.$router.go(0)        }    },}//路由配置let router = new VueRouter({    routes: [        {path: '/', component: Layout, children:[            {path: '', component: Home}        ]}    ]}) Vue.use(VueRouter)//根组件new Vue({    router,    el: '#app'})

登录后复制

(c)预览

vuejs视频教程

方式2-通过空白页面

(a)概述

通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性

优点:不会出现页面空白,用户体验好

缺点:地址栏会出现快速切换的过程

(b)代码

nbsp;html>                Document            * {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3dce6; }.main { flex: 1; }                    
//框架页let Layout = {    created() {        console.log('框架页加载')    },    template: `                    左侧菜单                            `}//首页let Home = {    template: `                    首页

登录后复制

(c)预览

vuejs视频教程

方式3-通过provide和inject

(a)概述

通过在父页面的上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新

优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好

缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick事件循环的应用

(b)代码

nbsp;html>                Document            * {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3dce6; }.main { flex: 1; }                    
//框架页let Layout = {    template: `                    左侧菜单                                        `,    created() {        console.log('框架页加载')    },    // 通过provide提供reload方法给后代组件    provide(){        return {            reload: this.reload        }    },    data(){        return {            isRouterAlive: true        }    },    methods: {        async reload(){            this.isRouterAlive = false            //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件            await this.$nextTick()            this.isRouterAlive = true        }    }}//首页let Home = {    template: `                    首页

登录后复制

(c)预览

vuejs视频教程

（学习视频分享：vuejs视频教程、vuejs视频教程）

以上就是浅析vue中怎么刷新当前页面的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3230799.html