Vue 페이지 새로 고침 또는 뒤로 매개변수 손실 문제 해결

아래에서는 Vue 페이지 새로 고침 또는 백 매개변수 손실 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

toB 프로젝트에서는 항목의 세부정보 페이지를 열거나 목록 페이지를 일시적으로 종료했다가 다시 돌아가려고 할 때(돌아갈 때) 목록 데이터 필터링 및 쿼리 시나리오를 자주 접하게 됩니다. .신 힘들게 선택했던 조건이 모두 사라져서 새로 선택해야 합니다. 페이징 오류가 있으면 이전에 본 페이지로 페이지를 넘겨야 합니다. 해로운.

두 가지 해결책이 있습니다:

첫 번째 방법: vue의 7c9485ff8c3cba5ae9343ed63c2dc3f7를 사용합니다. 즉, 975b587bf85a482ea10b0a28848e78a4 레이어를 7c9485ff8c3cba5ae9343ed63c2dc3f7 ;.

특정 효과를 얻을 수는 있지만 제어하기가 더 까다롭습니다. 예를 들어 프로젝트의 모든 페이지를 캐시할 필요가 없으며 코드 작성이 복잡합니다.

두 번째 방법: localStorage를 사용하세요. 직접적이고 단순하며 조잡한 (권장)

코드는 다음과 같습니다.

list.vue

export default {
    data () {
      return {
        searchForm:{
          project_name:'',
          status:'',
          city:'',
          round:'',
          fund:'',
          charge:'',
          page: 1
        },
      },
      beforeRouteLeave(to, from, next){
      //打开详情页（或者下一个任意界面）之前，把筛选条件保存到localStorage，如果离开列表页并且打开的不是详情页则清除，也可以选择不清除
      if (to.name == 'Detail') {
        let condition = JSON.stringify(this.searchForm)
        localStorage.setItem('condition', condition)
      }else{
        localStorage.removeItem('condition')
      }
      next()
    },
    created(){
      //从localStorage中读取条件并赋值给查询表单
      let condition = localStorage.getItem('condition')
      if (condition != null) {
       this.searchForm = JSON.parse(condition)
      }
      this.$http.get('http://example.com/api/test', {params: this.searchForm})
      .then((response)=>{
        console.log(response.data)
      }).catch((error)=>{
        console.log(error)
      })
    }
  }
}

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다. .

관련 기사:

vue 페이지 로딩 시 깜박이는 문제에 대한 솔루션

js가 ModelAndView 값을 얻는 문제에 대한 간략한 논의

Vue 렌더링 {{}} 깜박이는 문제 및 해결 방법

위 내용은 Vue 페이지 새로 고침 또는 뒤로 매개변수 손실 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!