精华内容
下载资源
问答
  • vue 刷新页面

    2019-05-24 18:42:58
    vue 刷新页面第一种 无痕刷新第二种 强制刷新第三种 伪造刷新 第一种 无痕刷新 先在全局组件注册一个方法,用该方法控制 router-view 的显示与否,然后在子组件调用; 用 v-if 控制 的显示; provide:全局注册方法...

    第一种 无痕刷新

    先在全局组件注册一个方法,用该方法控制 router-view 的显示与否,然后在子组件调用;
    用 v-if 控制 的显示;
    provide:全局注册方法;
    inject:子组件引用 provide 注册的方法;

    APP.vue代码

    <template>
      <div id="app">
        <!-- 添加v-if判断 -->
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      provide() {
        //注册一个全局的方法
        return {
          reload: this.reload
        };
      },
      data() {
        return {
          isRouterAlive: true
        };
      },
      methods: {
        reload() {
          //刷新页面
          this.isRouterAlive = false;
          this.$nextTick(function() {
            this.isRouterAlive = true;
          });
        }
      }
    };
    </script>
    
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
    }
    </style>
    

    当前组件进行刷新:

    <template>
      <div id="index">
        <el-button type="success" icon="el-icon-plus" @click=" updataall()">无痕刷新</el-button>
      </div>
    </template>
    <script>
    export default {
      name: "index",
      inject: ["reload"],//引入方法
      data() {
        return {
        };
      },
      methods: {
        updataall() {
          this.reload(); //调用方法,刷新当前页   
        }  
      }
    };
    </script>
    

    第二种 强制刷新

    window.location.reload()  //原生 js 提供的方法;可以简写为:location.reload()
    window.history.go(0)   //这里的window可以省略不写
    this.$router.go(0)  //vue 路由里面的一种方法;
    

    这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页面的重新载入,会有短暂的白屏。

    第三种 伪造刷新

    通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来:

    当前页面index.vue

    
    <template>
    	<div>
    	<el-button type="primary" class="btn" @click="btnaction">ti'ao'zhuang</el-button>
    	</div>
    </template>
    <script>
    	export default{
    		data(){
    			return{
    			}
    		},
    		mounted(){
    		},
    		methods:{
    			btnaction() {
                    this.$router.replace({
                    	path:'/kong',
                    	name:'Kong'
                    })
    			}
    		}
    	}
    

    空白页面kong.vue

    <template>
    	<h1>
    		空页面
    	</h1>
    </template>
     
    <script>
    	export default{
    		data() {
    			return{
    				
    			}
    		},
    		created(){
    			this.$router.replace({
                    	path:'/index',
                    	name:'Index'
                    })
    		}
    	}
    

    router的index.js路由配置

    {
        path: '/index', 
        name: 'Index',
        component: Index,
      },
      {
        path: '/kong', 
        name: 'Kong',
        component: Kong,
     },
    
    展开全文
  • vue刷新页面

    2021-02-25 16:13:53
    刷新页面代码 //原生刷新 location. reload() //vue刷新 this.$router.go(0)

    刷新页面代码

    //原生刷新
    location. reload()
    //vue刷新
    this.$router.go(0)
    
    展开全文
  • Vue刷新页面

    2021-01-25 14:02:10
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 1.原始方法: window.location.reload(); 2.vue自带的...

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。

    1.原始方法:

    • 原始
    window.location.reload();
    

    window.reload是重新加载当前需要的所有内容,也就包括页面和后台的代码,此过程中实际上是从后台重新进行操作;

    • 一般用于表格的加载更多的时候刷新表格使用
         <s-table
            ref="table"
            size="default"
            rowKey="key"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :rowSelection="rowSelection"
            showPagination="auto"
         />
    
    this.$refs.table.refresh()
    

    window.Refresh是刷新,保留之前的缓存内容,重新加载页面,之前存在的东西不会动,没加载上来的东西继续加载,也会去加载后台代码内容的。

    2.vue自带的路由跳转:

    this.$router.go(0);
    

    用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
    所以,我们选择第三种方式:

    3. 首先在App里面写下如下代码:

    <template>
        <div id="app">
        	<router-view v-if="isRouterAlive"></router-view>
    	</div>
    </template>
    <script>
        export default {
            name: 'App',
            provide () {    //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。                                             
                return {
                    reload: this.reload                                              
                }
            },
            data() {
                return{
                    isRouterAlive: true                    //控制视图是否显示的变量
                }
            },
            methods: {
                reload () {
                    this.isRouterAlive = false;            //先关闭,
                    this.$nextTick(function () {
                        this.isRouterAlive = true;         //再打开
                    }) 
                }
            }
        }
    </script>
    
    

    接下来,我们就可以在需要刷新页面的组件里这样写:

    export default {
        inject:['reload'],                                 //注入App里的reload方法
        data () {
            return {
        	.......
            }
        },
    

    在需要刷新页面的代码块中使用:

    this.reload();
    
    展开全文
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2019-06-08 10:54:18
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。

    1. 原始方法:
    location.reload();
    
    1. vue自带的路由跳转:
    this.$router.go(0);
    

    用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
    所以,我们选择第三种方式:
    3. 首先在App里面写下如下代码:

    <template>
        <div id="app">
        	<router-view v-if="isRouterAlive"></router-view>
    	</div>
    </template>
    <script>
        export default {
            name: 'App',
            provide () {    //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。                                             
                return {
                    reload: this.reload                                              
                }
            },
            data() {
                return{
                    isRouterAlive: true                    //控制视图是否显示的变量
                }
            },
            methods: {
                reload () {
                    this.isRouterAlive = false;            //先关闭,
                    this.$nextTick(function () {
                        this.isRouterAlive = true;         //再打开
                    }) 
                }
            }}
    </script>
    

    接下来,我们就可以在需要刷新页面的组件里这样写:

    export default {
        inject:['reload'],                                 //注入App里的reload方法
        data () {
            return {
        	.......
            }
        },
    

    在需要刷新页面的代码块中使用:

    this.reload();
    
    展开全文
  • vue刷新页面 刷新页面的三种方法 在项目中又刷新整个页面的需求,所以我们来谈谈刷新页面的方法,有两种常见的方法,还有一种不常见但是极力推荐的。 第一种 this.$router.go(0) 第二种 location. reload() 这两...
  • 我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。原始方法:location.reload();vue自带的路由跳转:this.$...
  • Vue刷新页面实现

    2020-11-01 12:53:03
    Vue刷新页面实现 使用provide / inject实现 App.js中注册provide // 在App.vue中进行修改 <template> <div></div> </template> <script> export default { name:"app" // 添加...
  • 主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue刷新页面时去闪烁提升体验方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。原始方法:location.reload();vue自带的路由跳转:this.$...
  • Vue刷新页面功能

    2020-04-11 22:58:32
    在使用Vue开发过程中,有时候修改了一些数据或者提交了表单以后需要刷新当前页面,js中有很多方法都可以刷新页面,但是我觉得都不是很友好,会突然整个页面白了一下,相当于按了F5刷新页面。最近看到了大神们的做法...
  • 关于Vue 刷新页面

    2019-10-09 02:38:02
    Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么...
  • vue刷新页面404

    2020-12-24 14:03:09
    vue-router默认使用的是hash模式,但是这样在访问页面的时候路径会带#,所以我就把hash改成了history,这样访问不带路径了,但是会出现刷新会报404。 错误原因 这是由于我配置了代理,代理了所有路径 devServer: {...
  • Vue 刷新页面导航菜单显示高亮位置不对
  • vue刷新页面方法

    2020-08-17 11:06:06
    reload() 方法类似于你浏览器上的刷新页面按钮。 (2)replace window.location.replace("") replace()方法用一个新的地址替换当前地址。 (3)provid 和 inject <template> <div id="app"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,097
精华内容 2,838
关键字:

vue刷新页面

vue 订阅