vue如何刷新组件(教你前端vue刷新组件的2种方式)

 分类:vue教程时间:2022-11-21 07:30:01点击:
vue如何刷新组件(教你前端vue刷新组件的2种方式)网址:

vue如何刷新组件,下面教你前端vue刷新组件的2种方式。

前端vue刷新组件的2种方式

方式1:

利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法

<template>
<router-view v-if="isRouterAlive"/>
</template>
<script>
export default {
 data () {
   return {
     isRouterAlive: true
   }
 },
 methods: {
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
   }   
 }
}
</script>

然后其它任何想刷新自己的路由页面,都可以这样:

this.reload()

这种方法可以实现任意组件的刷新。

方式2:

路由替换

// replace another route (with different component or a dead route) at first
// 先进入一个空路由
vm.$router.replace({
  path: '/_empty',
})
//then replace your route (with same component)
vm.$router.replace({
  path: '/student/report',
  query: {
    'paperId':paperId
  }
})


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: