provide + reload 实现vue 不刷新浏览器,页面自刷新

// 修改vue APP.vue文件
    <template>
        <div id="app">
            // 先将router-view 添加v-if或者v-show方法 通过控制显示和隐藏起到刷新页面的效果
            <router-view v-if="isRouterAlive" />
        </div>
    <template>
    <script>
        export default {
            provide() {
                return {
                    // 调用下面reload 的方法
                    reload: this.reload
                };
            },
            data() {
                // 初始化isRouterAlive
                return {
                    isRouterAlive: true
                };
            }
            methods: {
                reload() {
                    this.isRouterAlive = false;
                    this.$nextTick(function() {
                        this.isRouterAlive = true;
                    })
                }
            }
        }
    </script>

        // 上面是在app.vue文件里面修改的东西  下面教的是每个页面怎么使用这个方法
        // 后缀名为.vue的文件内容 是由 <template> <script> <style> 三部分组成  我们只需要在script里面添加 { inject: ["reload"] }  然后在我写的代码倒数第8行添加的  { this.reload() }这个方法就可以起到刷新页面的效果了
    <template>

    </template>
    <script>
        export default {
            inject: ["reload"],  //  不要忘记写这个
            data() {
                return {}
            },
            methods: {
                // 比方说我这个是页面的编辑方法,编辑完之后,点击 这时我需要重新刷新一下页面
                editDemo() {
                    // 如果看不懂我这个方法 可以去看看我自己封装的axios 链接这里:  https://www.cnblogs.com/blueswithchenxing/p/11119094.html
                    var res = this.$http.request({
                        // 这是请求的路径(路径的两边我用的不是单引号 而是 键盘esc / 键盘tab 按钮 下面 / 上面 的那个点 )
                        url: `/hhgjdshfsdf`,
                        data: {
                            //写你向后台传的数据
                        }
                    })
                    .then(function(res) {
                        var data = res.data;
                        if (data.status === 200) {
                            //这里写你需要的根据后台返回的数据赋值等操作  写完之后加 this.reload()  这个方法就可以了

                            this.reload(); //重新刷新页面的方法  哪个方法需要哪里调用就可以了
                        }
                    })
                }
            }
        }
    </script>
    <style></style>

原文地址:https://www.cnblogs.com/blueswithchenxing/p/11153086.html

时间: 2024-10-04 17:30:10

provide + reload 实现vue 不刷新浏览器,页面自刷新的相关文章

求教——使用node做表单,刷新浏览器页面,浏览器为什么会重复提交上次所填的信息

最近在学些node,按照<nodejs实战>上的代码做练习,发现有表单重复提交的问题 第一次打开页面,显示如图是get请求 图1 现在我们提交aaa,显示如图,post请求 图2 刷新页面,应该显示图1的,结果确实下面这张图,post请求.即使是按ctrl+f5刷新没用,浏览器还是重复提交了上次的内容,显示如图 图3 不断的刷就这样了,求教这个是为什么? 图4 node代码如下 var http=require("http"); var qs = require("

【 reload 方法】该方法强迫浏览器刷新当前页面

  [ reload 方法]该方法强迫浏览器刷新当前页面 ================================================= [一]要求刷新的窗口有一个名称,例如ABC.在要关闭的页面加入        <body onunload="javascript:ABC.location.reload()"> [二]如果要刷新的是将要关闭页面的父窗口,则可以在要关闭的页面加入 <body onunload="javascript:w

页面刷新 整个页面刷新和局部刷新

整个页面刷新 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=“#"> 其中20指隔20秒后跳转到#页面 3.页面自动刷新

学习aiax(javascript)--页面无刷新更新ajax更新时间

1.JSP代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生成css进行编译,而不是借助于考拉工具;  顺便从头来一遍流程-- 建立如上图01所示的目录结构,层次明晰,便于日后管理. 快捷键进入当前文件夹,在此打开dos窗口输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法) 之后安装 cnpm,为了日后安装所需的包,速度更

Sumlime Text编辑文件后快速刷新浏览器

作为Web开发人员,我们经常会这么做:在编辑器中调整代码,保存文件,切换到浏览器,然后刷新浏览器页面来查看结果.在代码编辑过程中,我们需要重复进行很多次这些操作. 如果你使用的是Sublime Text编辑器的话,你可以跳过其中一些步骤直接在浏览器中查看结果.这篇文章就为大家展示如何通过一个叫做BrowserRefresh-sublime的Sublime Text插件来实现上述功能. Browser Refresh for Sublime Text 首先,我们需要在Sublime Text中安装

vue,vue-router实现浏览器返回不刷新页面

当我们在写单页应用的时候,前端路由采用vue-router实现,如果从页面A跳到页面B,然后点浏览器返回,返回到页面A时,页面会刷新.最近遇到一个需求,一个列表页,用户会根据条件进行筛选,也可以翻页,当用户筛选后点击具体的某一个条目时,进入详情页查看编辑详情,用户点击返回时,希望之前页面的筛选条件也能够保留.查找相关资料,vue中有个keep-alive组件可以对组件进行缓存,这样当页面返回时就不会刷新页面. <keep-alive> <router-view></route

URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

vue刷新本页面

顶层app.vue页面 <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide() { return { reload: this.reload } }, da