记录--vue刷新当前页面

2023-03-28 17:59:31 来源：博客园

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

背景

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

(相关资料图)

思路

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

实现

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

(a)概述

通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面优点:足够简单缺点:会出现页面空白,用户体验不好

(b)代码

                Document    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>                    
<script>//框架页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"})</script>

(c)预览

链接

方式2-通过空白页面

(a)概述

通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性优点:不会出现页面空白,用户体验好缺点:地址栏会出现快速切换的过程

(b)代码

                Document    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>                    
<script>//框架页let Layout = {    created() {        console.log("框架页加载")    },    template: `                    左侧菜单
                
        
    `}//首页let Home = {    template: `                    首页                    
    `,    created() {        console.log("首页加载")    },    methods: {        onClick(){            //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径            this.$router.replace(`/blank?redirect=${this.$route.fullPath}`)        }    },}//空白页面let Blank = {    created(){        console.log("空白页加载")        //重新跳回之前的页面        this.$router.replace(this.$route.query.redirect)    },    template: `        
            `}//路由配置let router = new VueRouter({    routes: [        {path: "/", component: Layout, children:[            {path: "", component: Home}        ]},        //配置空白页面的路由        {path: "/blank", component: Layout, children:[            {path: "", component: Blank}        ]}    ]}) Vue.use(VueRouter)//根组件new Vue({    router,    el: "#app"})</script>

(c)预览

链接

方式3-通过provide和inject

(a)概述

通过在父页面的上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick事件循环的应用

(b)代码

                Document    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>                    
<script>//框架页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: `                    首页                    
    `,    created() {        console.log("首页加载")    },    //通过inject获取祖先元素的reload方法    inject: ["reload"],    methods: {        onClick(){            this.reload()        }    },}//路由配置let router = new VueRouter({    routes: [        {path: "/", component: Layout, children:[            {path: "", component: Home}        ]}    ]}) Vue.use(VueRouter)//根组件new Vue({    router,    el: "#app"})</script>

(c)预览

链接

方式4-通过给router-view绑定key属性

(a)概述

通过在父页面的上绑定和切换key属性,来销毁和重新创建页面的方式刷新页面,具体的方式是指定key的值为$route.fullPath,通过在子页面通过this.$router.push(this.$route.path+"?t="+Date.now())来改变$route.fullPath的值,从而刷新页面

优点:不会出现页面空白,并且代码简单缺点:地址栏出现随机参数

(b)代码

                Document    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>                    
<script>//框架页let Layout = {    template: `                    左侧菜单
                            
        
    `,    created() {        console.log("框架页加载")    }}//首页let Home = {    template: `                    首页                    
    `,    created() {        console.log("首页加载")    },    methods: {        onClick(){            this.$router.push(`${this.$route.path}?t=${Date.now()}`)        }    },}//路由配置let router = new VueRouter({    routes: [        {path: "/", component: Layout, children:[            {path: "", component: Home}        ]}    ]}) Vue.use(VueRouter)//根组件new Vue({    router,    el: "#app"})</script>

(c)预览

链接

本文转载于:

https://juejin.cn/post/7188103333440127037

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

关键词：