fix(components): fixed issue with keepAlive not working correctly for…

… initial page routes
framework7io · Feb 22, 2021 · 171ca2a · 171ca2a
1 parent f882766
commit 171ca2a
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 8 deletions.
diff --git a/src/react/components/view.jsx b/src/react/components/view.jsx
@@ -109,6 +109,7 @@ const View = forwardRef((props, ref) => {
   const routerData = useRef(null);
 
   let initialPage;
+  let initialRoute;
 
   const onViewInit = (view) => {
     emit(props, 'viewInit', view);
@@ -135,7 +136,9 @@ const View = forwardRef((props, ref) => {
     };
     f7routers.views.push(routerData.current);
     if (f7View.current && f7View.current.router && (url || main)) {
-      initialPage = getRouterInitialComponent(f7View.current.router, initialPageComponent);
+      const initialData = getRouterInitialComponent(f7View.current.router, initialPageComponent);
+      initialPage = initialData.initialPage;
+      initialRoute = initialData.initialRoute;
     }
   }
 
@@ -184,13 +187,19 @@ const View = forwardRef((props, ref) => {
               f7View.current.init(elRef.current);
               if (initialPage) {
                 initialPage.el = f7View.current.router.currentPageEl;
+                if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+                  initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+                }
               }
             }, 100);
           });
         } else {
           f7View.current.init(elRef.current);
           if (initialPage) {
             initialPage.el = f7View.current.router.currentPageEl;
+            if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+              initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+            }
           }
         }
       } else {

diff --git a/src/react/shared/get-router-initial-component.js b/src/react/shared/get-router-initial-component.js
@@ -35,5 +35,8 @@ export const getRouterInitialComponent = (router, initialComponent) => {
       },
     };
   }
-  return initialComponentData;
+  return {
+    initialPage: initialComponentData,
+    initialRoute,
+  };
 };
diff --git a/src/svelte/components/view.svelte b/src/svelte/components/view.svelte
@@ -21,6 +21,7 @@
   const { main, tab, tabActive, browserHistoryInitialMatch = true } = $$props;
 
   let initialPage;
+  let initialRoute;
   let el;
   let routerData;
   let f7View;
@@ -54,7 +55,9 @@
     };
     f7routers.views.push(routerData);
     if (f7View && f7View.router && (url || main)) {
-      initialPage = getRouterInitialComponent(f7View.router);
+      const initialData = getRouterInitialComponent(f7View.router);
+      initialPage = initialData.initialPage;
+      initialRoute = initialData.initialRoute;
     }
   }
 
@@ -107,14 +110,20 @@
             setTimeout(() => {
               f7View.init(el);
               if (initialPage) {
-                initialPage.el = f7View.routerPageEl;
+                initialPage.el = f7View.router.currentPageEl;
+                if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+                  initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+                }
               }
             }, 100);
           });
         } else {
           f7View.init(el);
           if (initialPage) {
-            initialPage.el = f7View.routerPageEl;
+            initialPage.el = f7View.router.currentPageEl;
+            if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+              initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+            }
           }
         }
       } else {

diff --git a/src/svelte/shared/get-router-initial-component.js b/src/svelte/shared/get-router-initial-component.js
@@ -35,5 +35,8 @@ export const getRouterInitialComponent = (router, initialComponent) => {
       },
     };
   }
-  return initialComponentData;
+  return {
+    initialPage: initialComponentData,
+    initialRoute,
+  };
 };
diff --git a/src/vue/components/view.vue b/src/vue/components/view.vue
@@ -207,6 +207,7 @@ export default {
     let routerData = null;
 
     let initialPage;
+    let initialRoute;
 
     const onViewInit = (view) => {
       emit('view:init', view);
@@ -238,7 +239,9 @@ export default {
       };
       f7routers.views.push(routerData);
       if (f7View && f7View.router && (props.url || props.main)) {
-        initialPage = getRouterInitialComponent(f7View.router, initialPageComponent);
+        const initialData = getRouterInitialComponent(f7View.router, initialPageComponent);
+        initialPage = initialData.initialPage;
+        initialRoute = initialData.initialRoute;
       }
     }
 
@@ -289,13 +292,19 @@ export default {
                 f7View.init(elRef.value);
                 if (initialPage) {
                   initialPage.el = f7View.router.currentPageEl;
+                  if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+                    initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+                  }
                 }
               }, 100);
             });
           } else {
             f7View.init(elRef.value);
             if (initialPage) {
               initialPage.el = f7View.router.currentPageEl;
+              if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+                initialRoute.route.keepAliveData = { pageEl: initialPage.el };
+              }
             }
           }
         } else {

diff --git a/src/vue/shared/get-router-initial-component.js b/src/vue/shared/get-router-initial-component.js
@@ -35,5 +35,8 @@ export const getRouterInitialComponent = (router, initialComponent) => {
       },
     };
   }
-  return initialComponentData;
+  return {
+    initialPage: initialComponentData,
+    initialRoute,
+  };
 };