码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-08 19:41:24      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:fun   显示   rip   倒数   ali   tab   eth   data   VID   

// 修改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>

 

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

标签:fun   显示   rip   倒数   ali   tab   eth   data   VID   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!