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

Posted 2022-03-27 blueswithchenxing

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