Vue 프로젝트의 현재 페이지를 새로 고치는 솔루션 소개

이 글은 Vue 프로젝트의 현재 페이지를 새로 고치는 솔루션을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

시나리오:

때로는 vue 프로젝트 페이지에서 일부 작업을 수행하고 페이지를 새로 고쳐야 할 때도 있습니다. vue项目页面做了一些操作，需要刷新一下页面。

解决的办法及遇到的问题：

this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好

用vue-router重新路由到当前页面，页面是不进行刷新的。

location.reload()。这种也是一样，画面一闪，体验不是很好

推荐解决方法：

用provide / inject 组合
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

<template>
  <p>
    <router-view></router-view>
  </p>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在需要用到刷新的页面。在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()

발생한 솔루션 및 문제:

this.$router.go(0). 이 방법에는 코드가 거의 없고 한 줄만 포함되어 있지만 사용 환경은 매우 좋지 않습니다. 페이지에 잠시 흰색 화면이 나타나서 사용감이 별로 좋지 않습니다

vue-router를 사용하여 현재 페이지로 다시 라우팅하면 페이지가 새로고침되지 않습니다.

location.reload(). 이것도 마찬가지입니다. 화면이 깜박이고 경험이 별로 좋지 않습니다

권장 솔루션:

#🎜🎜##🎜🎜#제공/주입 조합 사용
원칙: 구성 요소 계층 구조의 깊이에 관계없이 상위 구성 요소가 모든 하위 항목에 종속성을 주입할 수 있도록 허용하며 업스트림 및 다운스트림 관계가 설정될 때 항상 적용됩니다. #🎜🎜##🎜🎜# 앱 내 .vue, 다시 로드 방법을 선언하고, 라우터 보기의 표시 또는 숨기기를 제어하여 페이지 다시 로드를 제어합니다. #🎜🎜#rrreee#🎜🎜#새로고침이 필요한 페이지. App.vue 구성 요소(provide)에서 제공하는 reload 종속성을 페이지에 삽입합니다(삭제 또는 추가.. .), 현재 페이지를 새로 고치려면 this.reload()를 직접 호출하세요. #🎜🎜##🎜🎜#재로드 방법 삽입#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#this.reload를 직접 호출#🎜🎜##🎜🎜##🎜🎜##🎜 🎜##🎜🎜##🎜🎜#

위 내용은 Vue 프로젝트의 현재 페이지를 새로 고치는 솔루션 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!