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>

总结

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

相关文章

  • vue+element-ui JYAdmin后台管理系统模板解析

    vue+element-ui JYAdmin后台管理系统模板解析

    这篇文章主要介绍了vue+element-ui JYAdmin后台管理系统模板解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue 实现购物车总价计算

    vue 实现购物车总价计算

    今天小编就为大家分享一篇vue 实现购物车总价计算,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题

    vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题

    这篇文章主要介绍了vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue2中,根据list的id进入对应的详情页并修改title方法

    vue2中,根据list的id进入对应的详情页并修改title方法

    今天小编就为大家分享一篇vue2中,根据list的id进入对应的详情页并修改title方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue安装遇到的5个报错及解决方法

    vue安装遇到的5个报错及解决方法

    在本篇文章里小编给大家分享了关于vue安装遇到的5个报错小结以及解决方法,需要的朋友们参考下。
    2019-06-06
  • Vue+Element实现表格单元格编辑

    Vue+Element实现表格单元格编辑

    这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue中使用event的坑及解决event is not defined

    Vue中使用event的坑及解决event is not defined

    这篇文章主要介绍了Vue中使用event的坑及解决event is not defined,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2.0 子组件改变props值,并向父组件传值的方法

    vue2.0 子组件改变props值,并向父组件传值的方法

    下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue-editor-bridge报错的解决方案

    vue-editor-bridge报错的解决方案

    这篇文章主要介绍了vue-editor-bridge报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3 组合式函数Composable最佳实战

    Vue3 组合式函数Composable最佳实战

    这篇文章主要为大家介绍了Vue3 组合式函数Composable最佳实战详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论