이번에는 vue keep-alive를 사용하여 데이터를 요청하는 방법과 vue keep-alive를 사용하여 데이터를 요청할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.
색인 페이지: 홈페이지 브랜드 입구
목록 페이지: 상품 목록 페이지
상품 페이지: 상품 상세 페이지
색인 페이지에서 목록 입력 시 페이지를 새로고침해야 하며, 그럴 필요는 없습니다. 제품 페이지에서 목록으로 돌아올 때 페이지를 새로 고치므로 목록은 keep-alive 속성을 사용하고 keepAlive는 true로 설정됩니다. 그러나 제품에서 목록으로 돌아올 때 문제가 발견되었습니다. 목록 페이지가 올바른 브랜드 목록이 아니고 이전에 클릭한 브랜드 목록입니다. 잘못된 연결 유지 요청 데이터와 관련하여 모든 사람이 다양한 문제에 직면하므로 여기에 내 해결책이 있습니다. 이것이 당신에게 아이디어를 줄 수 있기를 바랍니다.
해결 방법
keepAlive를 수정해서 keep-alive를 변경하는 분들이 많을 텐데요. 시도해 봤는데 여전히 안 되서 마음을 바꿨습니다
Hook 함수 실행 순서
Don' keep-alive
beforeRouteEnter --> 생성됨 --> 파괴됨
beforeRouteEnter --> 활성화됨 --> deactivated
list.vue먼저 읽고 쓰는 능력을 배워봅시다. 많은 사람들이 위의 지식을 모릅니다. keep-alive 페이지에서 this.$route.params의 매개변수를 피할 수 있습니다. keepAlive를 설정하면 제품이 반환될 때 데이터가 부정확하게 됩니다. 페이지가 목록에 진입하면 캐시된 상태가 되며, 이후 인덱스에 의해 입력되는지 여부에 따라 활성화된 기능의 실행 여부를 판단합니다. ,
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; },
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);
vue 입력 입력을 작동하여 문자와 숫자 조합을 확인하고 길이가 30보다 작은지 확인하는 방법
seajs를 사용하여 require에서 규칙을 작성하는 방법
위 내용은 vue keep-alive를 사용하여 데이터를 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!