vue不用window的方式如何刷新当前页面

 更新时间:2023年11月09日 10:01:20   作者:donggua_123  
这篇文章主要介绍了vue不用window的方式如何刷新当前页面,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目中我们很多时候需要刷新页面,比如本地用户信息更新后,或者需要重新加载当前页面的数据时,使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新,和h5快捷键一样,会有短暂空白出现,体验很不好,这里说两种在vue项目里使用的无感知刷新页面方法:

一、provide/inject方法

父组件中provide提供的属性可以在任何子组件里通过inject接收到,那么我们在App页面动态改变总路由的显示和隐藏来达到刷新的效果。

在App页面定义一个reload方法:

App.vue

        reload() {
            this.defaultActive = false;
            this.$nextTick(() => {
                this.defaultActive = true;
            });
        }

defaulActive用于控制页面的显影:

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

provide提供子组件访问的入口:

    provide() {
        return {
            reload: this.reload
        };
    }

在需要刷新的页面通过inject接收到该全局方法:

page.vue

inject: ["reload"]

需要刷新的时候调用该方法:

        refresh() {
            this.reload();
        }

全部代码:

App.vue:

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

page.vue

<script>
export default {
    inject: ["reload"],
    data() {
        return {};
    },
    methods: {
        refresh() {
            this.reload();
        }
    }
};
</script>

二、中间页面重定向

可以新建一个页面reload.vue,当page.vue需要刷新的时候,将路由指向reload页面,再跳转回page页面,由于页面的key发生了变化,所以页面会被刷新

page.vue:

        refresh() {
            const { fullPath } = this.$route;
            this.$router.replace({
                path: "/redirect",
                query: { path: fullPath }
            });
        }

reload.vue:

<script>
    export default {
        name: "reload",
        props: {},
        beforeCreate() {
            const { query } = this.$route;
            const { path } = query;
            this.$router.replace({
                path: path
            });
        },
        render(h) {
            return h();
        }
    };
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解如何在Electron中存取本地文件

    详解如何在Electron中存取本地文件

    在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下
    2023-11-11
  • 解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题

    解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题

    这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue实现锁屏功能的示例代码

    Vue实现锁屏功能的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue实现简单的锁屏功能,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解一下
    2023-06-06
  • 基于VUE实现判断设备是PC还是移动端

    基于VUE实现判断设备是PC还是移动端

    这篇文章主要介绍了基于VUE实现判断设备是PC还是移动端,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue如何通过$router.push传参数

    vue如何通过$router.push传参数

    这篇文章主要介绍了vue如何通过$router.push传参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue2.0如何实现echarts饼图(pie)效果展示

    vue2.0如何实现echarts饼图(pie)效果展示

    这篇文章主要介绍了vue2.0如何实现echarts饼图(pie)效果展示,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目Nginx子目录部署(Vite和Vue-CLI)

    Vue项目Nginx子目录部署(Vite和Vue-CLI)

    本文主要介绍了Vue项目Nginx子目录部署(Vite和Vue-CLI),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • 详解基于iview-ui的导航栏路径(面包屑)配置

    详解基于iview-ui的导航栏路径(面包屑)配置

    这篇文章主要介绍了详解基于iview-ui的导航栏路径(面包屑)配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Django+Vue实现WebSocket连接的示例代码

    Django+Vue实现WebSocket连接的示例代码

    这篇文章主要介绍了Django+Vue实现WebSocket连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    这篇文章主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05

最新评论