현재 페이지를 새로 고침하는 세 가지 방법 - 사전 업데이트 상황에서 페이지가 새로 고침되지 않은 문제를 해결합니다

때때로 프로젝트에서 우리는 페이지에서 일부 조작을 완성한 후에 페이지 리셋을 해야 하지만 js의 리셋 방식으로 상호작용 체험을 하는 것은 매우 우호적이지 않다. 본고는provide/inject 조합을 중점적으로 소개하여 운전자의 개발에 리셋이 필요한 문제를 해결한다. 
프로젝트 1 (추천하지 않음)this.$router.go(0). 루트 점프 방식을 통해 페이지를 다시 렌더링하면 코드량이 적고 쓰기와 이해가 편리하지만 체험이 좋지 않아 리셋하는 순간 흰색 화면이 나타난다.
프로젝트 2 (추천하지 않음) location.reload(). 이 방법은 단지 하나의 매개 변수만 있습니다. 값이true일 때 브라우저가 서버에서 페이지 자원을 불러오도록 강요하고, 값이false일 때나 참조되지 않을 때 브라우저는 캐시에서 페이지를 읽을 수 있습니다.단점: 이 방법은 크로스 호출 (이 방법을 실행하는 스크립트 파일의 크로스와 로케이션 대상이 있는 페이지의 크로스가 다르다) 에서 DOMException 이상을 던집니다.또한 페이지를 새로 고칠 때 흰색 화면이 나타나는 현상도 마찬가지다.
프로젝트 3 (provide/inject 조합)
원리: 하나의 조상 구성 요소가 모든 자손 후손에게 의존을 주입하도록 허용한다. 구성 요소의 차원이 아무리 깊어도 상하류 관계가 성립되는 시간에 시종 효력이 발생한다.알림:provide와 inject가 연결되어 있는 것은 응답할 수 있는 것이 아닙니다.이것은 고의로 한 것이다.그러나 만약 당신이 감청 가능한 대상을 전송한다면, 그 대상의 속성은 응답할 수 있습니다.
 
APP에 있습니다.vue에서,reload 방법을 설명하고,router-view 모듈의 표시나 숨김을 제어하여, 페이지의 다시 불러오는 것을 제어합니다.

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}

리셋이 필요한 페이지에서 inject의reload 의존을 직접 주입하고 논리 작업이 끝난 후 리셋이 필요한 위치에서this를 사용합니다.reload () 호출을 사용하면 현재 페이지를 새로 고칠 수 있습니다.

export default {
  inject: ["reload"], //  reload  
  data() {
    return {
    };
  },
  methods: {
    handleClick() {
      //        
      //.......

      this.reload(); //      
    }
  },
};