vue에서 라우팅을 사용하여 페이지 새로 고침 구현

이 글은 주로 Vue가 라우팅을 통해 페이지 새로 고침을 구현하는 방법을 소개합니다. 이제 공유하고 참고용으로 제공합니다.

vue는 WeChat 쇼핑몰 프로젝트를 개발합니다.

장바구니 페이지는 세부정보 페이지로 이동합니다. 장바구니 페이지에서 주문 페이지로 이동하려면 결제를 클릭하세요. order, 장바구니 페이지가 존재하지 않습니다. 새로 고침, 버스를 통한 장바구니 구성 요소 간 이벤트 전송으로 인해 페이지 점프(비물리적 반환)가 beforeDestroy 메서드를 트리거할 수 없으므로 이 메서드에서는 버스 메서드가 파기될 수 없습니다

 beforeDestroy() {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')
 },

무력함, beforeRouteLeave를 통해 파괴

 beforeRouteLeave(to, from, next) {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')

  next()
 },

동일, 물리학이 반환될 때 장바구니의 생성 메소드가 트리거될 수 없으며 버스의 $on 메소드가 트리거될 수 없습니다

최종 분석에서 물리학이 반환될 때 페이지를 새로 고칩니다. 반품하면 이 문제를 해결할 수 있습니다

아이디어 1

  beforeRouteEnter(to, from, next) {
   next(()=>{
     window.location.reload()
   })
  },

이 방법은 이론적으로는 가능해 보이지만 페이지가 끝없이 스크롤됩니다.

마지막으로 매우 낮은 방법인 것 같은 두 번째 아이디어

를 채택했습니다. 하지만 실제 문제는 해결됩니다

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
   this.$router.push({
    path: '/order/order_sure',
    query: {
     sku: sku_str,
     cart: 'cart'
    }
   })

페이지가 이동하기 전에 라우팅을 통해 현재 페이지로 교체한 다음 주문 페이지로 이동하면 반환이 자동으로 새로 고쳐질 수 있습니다. 이 방법은 더 나은 방법이 아닙니다.

이 문제를 해결하는 특별한 방법이 있습니다. 장바구니 페이지에 다음 코드를 추가하세요.

 // 销毁组件，返回刷新
 deactivated() {
  this.$destroy()
 },

위 내용은 제가 정리한 내용입니다. 미래.

관련 기사:

PHP 클로저 및 익명 함수(자세한 튜토리얼)

Vue 구성 요소의 사용자 정의 이벤트 정보(자세한 튜토리얼)

WeChat 애플릿에서 3단계 연결 선택기를 사용하는 방법

위 내용은 vue에서 라우팅을 사용하여 페이지 새로 고침 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!