Vue refreshes the current route, is there any good solution?

this.$router.go(0);
location.reload() 
//f5
this.$router.push({ path: "/kong", query: {} });
// 
// /kong 
// 

excuse me, is there any other good way to refresh the page?

Mar.19,2021

I think you can take a look at this issue

.

but you Dati's method may not meet your needs. If you, like me, want to restart the entire life cycle from breforeCreate , then
you can make a slight modification to your method

.
this.$router.push({ path: '/kong', query: {} });

replace push with replace
the same kong this page beforeRouteEnter also use replace
, there will not be that fallback problem

attach the code I use

// 
refresh () {
  this.$router.replace({
    path: '/refresh',
    query: {
      t: Date.now()
    }
  })
}

// refresh.vue
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
    })
  }
}
</script>

has a coquettish operation, that is, the outermost layer of the current routing page uses vmuriff = "ifreload".
ifreload defaults to true; when the dom of this page is rendered normally.
when you need to refresh, this.ifreload=false; directly and then ifreload=true;
when you ifreload=false, the dom of the page is removed. Ifreload=true renders again. You can refresh this page. The fallback of the browser has no effect.


maybe not from api, but I think it's a good idea to add < transation > excessive animation.
if the page load leads to slow rendering, consider loading on demand


vm.$forceUpdate ()
example:
forces the Vue instance to render again. Note that it affects only the instance itself and the sub-components that insert the contents of the slot, not all the sub-components.

maybe you need this? I just saw it in the file, and I haven't used it either. )

Menu