VUE-Router 같은 페이지 에서 두 번 째 로 새로 고침 되 지 않 는 문 제 를 해결 합 니 다.

최근 에 마침 문제 가 생 겼 습 니 다.사용자 의 프로필 사진 을 수정 하고 수정 한 후에 사용자 홈 페이지 에 들 어 갔 는데 수정 한 후에 데이터 가 변 하 더 라 도.페이지 도 다시 렌 더 링 되 지 않 습 니 다...
다음은 몇 가지 해결 방안 을 제공 하여 여러분 께 참고 하 겠 습 니 다.
1.새로 고침 한 페이지 에서 매개 변 수 를 정의 할 수 있 습 니 다.그러면 매번 다른 페이지 를 보 여 줍 니 다.
route 실례 화 이름 설정:

{
   //     
   path: '/accountDetail/:randKey',
   name: 'accountDetail',
   component: accountDetail,
   meta: {requiresAuth: true}
 },
점프 하 는 곳 설정:

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 var maxLength = 15;
    var res = '_jsonpphotochange';
    for (var i = 0; i < maxLength; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    // res       ,     :
 this.$router.push('/accountDetail/' + paramsAccount);
2.전체 페이지 를 다시 불 러 올 수 있 습 니 다.이것 은 비교적 지루 하고 많 습 니 다.중요 한 것 은 다음 과 같 습 니 다.
App.vue 에서 수정:

<template>
 <div id="app" class="app">
  <transition :key="key">
  <router-view class="router-view"></router-view>
  </transition>
 </div>
 </template>
 <script type="text/ecmascript-6">
 // import {mapState} from 'vuex';
 export default {
  name: 'app',
  computed: {
  key() {
   return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
  }
  }
 };
 </script>
//    template      <transition></transition>   key   ,                               。
3.watch 는 경로 변 화 를 측정 합 니 다.단점 은 가끔 괜 히 두 번 씩 뛰 는 경우 가 있다 는 것 이다.즉,너 는 두 번 뛰 어야 한 다 는 것 이다.어떤 사람 은 들 어 오 면 한 번 씩 뛰 고 한 번 씩 집행 한다 고 말 하지만,나 는 그다지 닮 지 않 았 다 고 생각한다.누군가가 지적 해 줬 으 면 좋 겠 어 요.

 watch: {
 '$route' (to, from) {
  this.httpGetUserInfo(); //    ajax         
 }
 }
//                 ,         ,    created()      ajax  。
보충 지식:vue 페이지 전환 parmas 전 삼 의 리 셋 페이지 매개 변수 분실 문제 해결 방법
앞에서 말 하 다.
오늘 문제 가 발생 했 습 니 다.vue 의 parmas 전 삼 을 통 해 해당 페이지 로 이동 하면 F5 가 전 달 된 매개 변 수 를 새로 고침 하면 사라 집 니 다.query 전송 인삼 으로 바 꾸 려 고 시도 하지만 프로젝트 의 경로 에 파 라 메 터 를 가 져 올 수 없 기 때문에 새로 고침 하면 페이지 를 찾 을 수 없습니다.바 이 두 는 오 랜 시간 동안 여러 번 시 도 했 고 마지막 에 방법 을 찾 았 습 니 다.나중에 필요 할 때 기억 하 세 요.주로 vuex 느낌 인지 local storage 가 이해 하기 쉬 운 지 모 르 겠 어 요...)
1.utils 폴 더 아래 새 localstorage.js 파일

2.저장 할 파일 에 localstorage.js 를 도입 하고 db.save 를 통 해 데 이 터 를 저장 합 니 다.

3.이동 한 페이지 에 localstorage.js 를 도입 하고 db.get 을 통 해 데 이 터 를 가 져 옵 니 다.

위 와 같은 VUE-Router 페이지 에서 두 번 째 로 새로 고침 되 지 않 는 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.

좋은 웹페이지 즐겨찾기