vue keep-alive를 사용하여 데이터를 요청하는 방법

이번에는 vue keep-alive를 사용하여 데이터를 요청하는 방법과 vue keep-alive를 사용하여 데이터를 요청할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

색인 페이지: 홈페이지 브랜드 입구

목록 페이지: 상품 목록 페이지

상품 페이지: 상품 상세 페이지

색인 페이지에서 목록 입력 시 페이지를 새로고침해야 하며, 그럴 필요는 없습니다. 제품 페이지에서 목록으로 돌아올 때 페이지를 새로 고치므로 목록은 keep-alive 속성을 사용하고 keepAlive는 true로 설정됩니다. 그러나 제품에서 목록으로 돌아올 때 문제가 발견되었습니다. 목록 페이지가 올바른 브랜드 목록이 아니고 이전에 클릭한 브랜드 목록입니다. 잘못된 연결 유지 요청 데이터와 관련하여 모든 사람이 다양한 문제에 직면하므로 여기에 내 해결책이 있습니다. 이것이 당신에게 아이디어를 줄 수 있기를 바랍니다.

해결 방법

keepAlive를 수정해서 keep-alive를 변경하는 분들이 많을 텐데요. 시도해 봤는데 여전히 안 되서 마음을 바꿨습니다

Hook 함수 실행 순서

Don' keep-alive

beforeRouteEnter --> 생성됨 --> 파괴됨

beforeRouteEnter --> 활성화됨 --> deactivated

먼저 읽고 쓰는 능력을 배워봅시다. 많은 사람들이 위의 지식을 모릅니다. keep-alive 페이지에서 this.$route.params의 매개변수를 피할 수 있습니다. keepAlive를 설정하면 제품이 반환될 때 데이터가 부정확하게 됩니다. 페이지가 목록에 진입하면 캐시된 상태가 되며, 이후 인덱스에 의해 입력되는지 여부에 따라 활성화된 기능의 실행 여부를 판단합니다. ,

list.vue

   beforeRouteEnter(to, from, next) {
   //判断从index页面进入，将list的isBack设置为true
   //这样就可以请求数据了
     if (from.name == 'index') {
      to.meta.isBack = true;
     }
     next();
   },
   activated: function () {
     if (this.$route.meta.isBack || this.isFirstEnter) {
      //清理已有商品列表的数据，重新请求数据，如果不清除的话就会有之前的商品缓存，延迟显示最新的商品
      this.proData = [];
      //请求数据
      this.fetchData();
     }
     //重新设置当前路由的isBack
     this.$route.meta.isBack = false;
     //重新设置是否第一次进入
     this.isFirstEnter = false;
   },
   mounted: function () {
    //如果是第一次进入，或者刷新操作的话，也请求数据
     this.isFirstEnter = true;
   },

router.js

const appRouter = {
 mode: "history",
 base: "/m/",
 routes: [
  {
   path: "",
   redirect: "/index"
  },
  {
   path: "/index",
   name: "index",
   component: Index,
   meta: {
    keepAlive: true
   }
  },
    {
   path: "/list",
   name: "list",
   component: List,
   meta: {
    keepAlive: true,
    isBack: false //isback是true的时候请求数据，或者第一次进入的时候请求数据
   }
  },
  {
   path: "/product/:id",
   name: "product",
   component: Product,
   meta: {
    keepAlive: false
   }
  }
  
 ]
};

Vue.use(Router);
export default new Router(appRouter);

이 글의 사례를 읽어보셨을 거라 믿습니다. 방법을 익히신 후, 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 글도 주목해 주세요!

추천 자료:

vue 입력 입력을 작동하여 문자와 숫자 조합을 확인하고 길이가 30보다 작은지 확인하는 방법

seajs를 사용하여 require에서 규칙을 작성하는 방법

위 내용은 vue keep-alive를 사용하여 데이터를 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!