vue 路由强制刷新页面最简单方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 路由强制刷新页面最简单方法相关的知识,希望对你有一定的参考价值。

参考技术A 切换导航用户/组织id后,i需要刷新所在页面。
ctrl+f5/window.reload会页面刷新,但可以vue内部实现。

1空白页

2 引入公共head所在跳转页

route.js

https://blog.csdn.net/qq_16772725/article/details/80467492

vue修改数据,刷新当前页面,重新渲染页面数据

业务场景:在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。(其他方法:this.$router.go(0),会强制刷新,出现空白页面体验不好);

原理是:通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果。

代码如下:

1:在父组件中加入

<template>
  <div id="app">
        <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
       })
    }
  },
  components:{
  }
}
</script>

2:然后在子组件export default中引入

inject:[‘reload‘]

3:最后在执行完相应的操作,后调用reload方法就可以了!

this.reload();

 

以上是关于vue 路由强制刷新页面最简单方法的主要内容,如果未能解决你的问题,请参考以下文章

vue 中刷新路由几种方法

vue 强制刷新组件

vue 强制刷新子组件

Vue组件强制刷新的解决方案

Vue this.$forceUpdate() 强制刷新数据

vue怎么刷新当前页面