优化页面缓存和动画

Author: konglingwen94

src/App.vue

@@ -10,7 +10,11 @@
       ></Header>
     </header>
     <main>
-      <router-view></router-view>
+      <transition appear :name="pageTransitionName">
+        <keep-alive :exclude="['resume','resume-editor',]" :max="30">
+          <router-view :key="$route.path"></router-view>
+        </keep-alive>
+      </transition>
     </main>
     <footer v-if="$route.name !== 'products'">
       <Footer></Footer>
@@ -23,8 +27,8 @@ export default {
   data() {
     return {
       homeScrollY: 0,
-
-      animationName: "",
+      pageTransitionName: "",
+      animationName: ""
     };
   },
 
@@ -35,7 +39,7 @@ export default {
         : this.homeScrollY < Math.max(400, window.innerHeight)
         ? "is-transparent"
         : "main-color";
-    },
+    }
   },
   created() {
     this.$root.$on("home-scrolling", (direction, pos) => {
@@ -55,13 +59,26 @@ export default {
       }
     });
   },
+  watch: {
+    $route(newRoute) {
+      if (
+        ["jobs", "user", "resume", "jobDetail", "resume-editor"].includes(
+          newRoute.name
+        )
+      ) {
+        this.pageTransitionName = "jumpPage";
+      } else {
+        this.pageTransitionName = "";
+      }
+    }
+  },
   methods: {
     onAnimationStart(e) {
       if (e.animationName === "slideInDown") {
         e.target.style.top = 0;
       }
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less">
@@ -88,6 +105,15 @@ export default {
   animation: slideOutUp 0.4s;
 }
 
+.jumpPage-enter {
+  transform: translate3d(0, 80px, 0);
+  opacity: 0;
+}
+
+.jumpPage-enter-active {
+  transition: all 0.56s;
+}
+
 footer {
   margin-top: 100px;
 }

src/components/Bytedance-Button.vue

@@ -1,6 +1,11 @@
 <template>
-  <div v-on="$listeners" class="bytedance-button" :class="`bytedance-button-${size}`">
+  <div
+    v-on="$listeners"
+    class="bytedance-button"
+    :class="[`bytedance-button-${size}`,{'bytedance-button-loading':loading}]"
+  >
     <span>
+      <i class="el-icon-loading" v-if="loading"></i>
       <slot>bytedance-button</slot>
     </span>
   </div>
@@ -9,6 +14,9 @@
 export default {
   name: "bytedance-button",
   props: {
+    loading: {
+      type: Boolean
+    },
     size: {
       type: String,
       default: "medium",
@@ -32,7 +40,14 @@ export default {
   border-radius: 23px;
   position: relative;
   cursor: pointer;
-  &:hover :after {
+  .el-icon-loading {
+    margin-right: 5px;
+  }
+  &-loading {
+    pointer-events: none;
+  }
+  &:hover :after,
+  &-loading:after {
     content: "";
     position: absolute;
     background-color: rgba(255, 255, 255, 0.3);

src/router/index.js

@@ -69,7 +69,7 @@ const router = new VueRouter({
   //     : process.env.BASE_URL  ,
   routes,
   scrollBehavior(to, from, savedPosition) {
-    return { x: 0, y: 0 };
+    // return { x: 0, y: 0 };
     if (savedPosition) {
       return savedPosition;
     } else {
@@ -80,12 +80,7 @@ const router = new VueRouter({
 
 export default router;
 
-// router.beforeEach((to, from, next) => {
-//   console.log('beforeeach')
-//   document.scrollingElement.scrollTo(0, 0);
-//   next()
-// });
-
+ 
 
 
 router.onError((err) => {

src/views/Products.vue

@@ -38,7 +38,7 @@
 </template>
 <script>
 export default {
-  name: "Product",
+  name: "product",
   data() {
     return {
       products: [],

src/views/ResumeEditor.vue

@@ -714,6 +714,7 @@ import {
 
 let footerActionPosition = null;
 export default {
+  name: "resume-editor",
   data() {
     return {
       submitLoading: false,

src/views/User.vue

@@ -6,42 +6,27 @@
           class="login-tabbar__item"
           :class="{ 'login-tabbar__item--active': loginMode === 'phone' }"
           @click="toggleLoginMode('phone')"
-        >
-          手机号登录
-        </li>
+        >手机号登录</li>
         <li
           class="login-tabbar__item"
           @click="toggleLoginMode('email')"
           :class="{ 'login-tabbar__item--active': loginMode === 'email' }"
-        >
-          邮箱登录
-        </li>
+        >邮箱登录</li>
       </ul>
 
       <ul class="login-form-content">
         <li class="login-form-content__phone" v-if="loginMode === 'phone'">
           <el-form :model="phoneForm" key="phone">
             <el-form-item>
-              <el-input
-                v-model="phoneForm.phone"
-                placeholder="输入手机号"
-                class="input-with-select"
-              >
-                <el-select
-                  slot="prepend"
-                  v-model="selectedCountry"
-                  placeholder="请选择"
-                >
-                  <el-option value="disabled" disabled
-                    >选择国家和地区</el-option
-                  >
+              <el-input v-model="phoneForm.phone" placeholder="输入手机号" class="input-with-select">
+                <el-select slot="prepend" v-model="selectedCountry" placeholder="请选择">
+                  <el-option value="disabled" disabled>选择国家和地区</el-option>
                   <hr class="input-with-select__divider" />
                   <el-option
                     :value="`+${item.val}`"
                     v-for="item in mobileCode"
                     :key="item.id"
-                    >{{ item.country }} +{{ item.val }}</el-option
-                  >
+                  >{{ item.country }} +{{ item.val }}</el-option>
                 </el-select>
               </el-input>
             </el-form-item>
@@ -53,18 +38,14 @@
           </el-form>
         </li>
         <li class="login-form-content__email" v-else>
-          <el-form
-            key="email"
-            :rules="emailFormRules"
-            :model="emailForm"
-            ref="emailForm"
-          >
+          <el-form key="email" :rules="emailFormRules" :model="emailForm" ref="emailForm">
             <el-form-item ref="emailFormItem" prop="email">
               <el-input
                 @blur="onEmailInputBlur"
                 @focus="clearEmailValidation"
                 v-model="emailForm.email"
                 placeholder="请输入邮箱"
+                autocomplete="on"
               ></el-input>
             </el-form-item>
             <el-form-item prop="password" ref="passFormItem">
@@ -90,9 +71,7 @@
         </li>
       </ul>
       <div class="login__button">
-        <bytedance-button @click="handlerLogin" type="primary" size="large"
-          >登录</bytedance-button
-        >
+        <bytedance-button :loading="loading" @click="handlerLogin" type="primary" size="large">登录</bytedance-button>
       </div>
     </div>
   </div>
@@ -101,12 +80,12 @@
 import {
   fetchLoginByEmail,
   fetchCommonSettings,
-  fetchEmailRegisterStatus,
+  fetchEmailRegisterStatus
 } from "@/helper/requestWithToken.js";
 import store from "@/store/index.js";
 
- 
 export default {
+  name: "user",
   data() {
     const self = this;
     const validator = async (rule, val, cb, source, opt) => {
@@ -117,7 +96,7 @@ export default {
       if (triggerType === "submit") return;
       try {
         var result = await fetchEmailRegisterStatus({
-          email: self.emailForm.email,
+          email: self.emailForm.email
         });
       } catch (error) {
         throw error;
@@ -131,43 +110,44 @@ export default {
       {
         required: true,
         trigger: "blur",
-        message: "邮箱不能为空",
+        message: "邮箱不能为空"
       },
       {
         type: "email",
         trigger: "blur",
-        message: "邮箱格式不正确",
+        message: "邮箱格式不正确"
       },
       {
         validator,
-        trigger: "blur",
-      },
+        trigger: "blur"
+      }
     ];
     return {
       emailFormRules: {
         email: mutipleEmailRules,
         password: {
           required: true,
-          message: "密码不能为空",
-        },
+          message: "密码不能为空"
+        }
       },
       loginMode: "email",
       mobileCode: [],
       phoneForm: {
         verifyCode: "",
-        phone: "",
+        phone: ""
       },
       emailForm: {
         email: "",
-        password: "",
+        password: ""
       },
       passwordInputType: "password",
       selectedCountry: "",
+      loading: false
     };
   },
 
   created() {
-    fetchCommonSettings().then((response) => {
+    fetchCommonSettings().then(response => {
       this.mobileCode = response.data.mobile_code;
     });
   },
@@ -195,11 +175,15 @@ export default {
       } catch (error) {
         return;
       }
+      this.loading = true;
       try {
         await store.requestUserInfo();
       } catch (error) {
+        this.loading = false;
+
         return error;
       }
+      this.loading = false;
 
       this.$router.push("/");
     },
@@ -216,8 +200,8 @@ export default {
     togglePasswordInputType() {
       this.passwordInputType =
         this.passwordInputType === "password" ? "text" : "password";
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less">