修改退出登录再进去有缓存问题

src/App.vue

@@ -9,14 +9,12 @@
 <script>
 export default {
   name: "App",
-
   data() {
     return {
       screenWidth: document.body.clientWidth,
       list: ["Growing"]
     };
   },
-  methods: {},
   mounted() {
     const that = this;
     window.onresize = () => {
@@ -25,17 +23,26 @@ export default {
         that.screenWidth = window.screenWidth;
       })();
     };
+
+    // 监听路由，进入登录页清空缓存列表
+    this.$router.afterEach((to) => {
+      if (to.path === "/login") {
+        // 清空缓存名单，页面实例销毁
+        this.list = [];
+        // 延迟恢复，下次登录正常缓存Growing
+        setTimeout(() => {
+          this.list = ["Growing"];
+        }, 100);
+      }
+    })
   },
   watch: {
     screenWidth(val) {
-      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
       if (!this.timer) {
-        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
         this.screenWidth = val;
         this.timer = true;
         let that = this;
         setTimeout(function() {
-          // 打印screenWidth变化的值
           that.$router.go(0);
           that.timer = false;
         }, 400);

src/components/growing/RankChart.vue

@@ -155,40 +155,7 @@ export default {
   mixins: [resize],
   data() {
     return {
-      data: [
-        250000,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854,
-        5854
-      ],
-      vList: [],
+      data: [],
       num: [
         "one",
         "two",
@@ -230,11 +197,9 @@ export default {
     this.API.growing
       .provinceRanking()
       .then(res => {
-        // console.log(res);
-
         let arr = res.data;
         arr.sort(function(a, b) {
-          var x = b.totalMoney; //如果要从大到小,把x,y互换就好
+          var x = b.totalMoney;
           var y = a.totalMoney;
           return x < y ? -1 : x > y ? 1 : 0;
         });
@@ -254,10 +219,19 @@ export default {
       .catch(error => {
         console.log(error);
       });
-    // this.show();
-
+    // 挂载全局滚动监听
     window.addEventListener("scroll", this.lazyLoading, true);
   },
+  // 新增：组件销毁钩子，清除定时器、移除滚动监听
+  beforeUnmount() {
+    // 清除自动滚动定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    // 移除window全局滚动监听，彻底断绝报错触发
+    window.removeEventListener("scroll", this.lazyLoading, true);
+  },
   methods: {
     fontSize(res) {
       let docEl = document.documentElement,
@@ -271,66 +245,57 @@ export default {
     },
 
     lazyLoading() {
-      // 滚动到底部，再加载的处理事件
-      // 滚动高度;
-      let noScrollBar = this.$refs.head;
+      // 增加防御判断：ref不存在直接终止执行
+      const noScrollBar = this.$refs.head;
+      if (!noScrollBar) return;
       let scrollTop = noScrollBar.scrollTop;
-      // console.log("scrollTop:" + scrollTop);
-      //可视区高度
       let clientHeight = noScrollBar.clientHeight;
-      // console.log("clientHeight" + clientHeight);
-      //滚动页面的高度
       let scrollHeight = noScrollBar.scrollHeight;
-      // console.log("scrollHeight" + scrollHeight);
 
       if (scrollTop + clientHeight >= scrollHeight) {
-        // document.getElementById("noScrollBar").scrollTop = 0
-        // console.log("滚动到底部，触发");
         setTimeout(() => {
-          noScrollBar.scrollTop = 0;
+          // 再次防御判断
+          if (noScrollBar) noScrollBar.scrollTop = 0;
         }, 2000);
       }
-      // let noScrollBar = this.$refs.head;
-      // console.log(noScrollBar.scrollTop);
-      // let clientH = this.$refs.clientH;
-      // if (noScrollBar.scrollTop == clientH.clientHeight) {
-      //   noScrollBar.scrollTop = 0;
-      // }
     },
     setIn(elNum, delay) {
-      let noScrollBar = this.$refs.head;
-      // let clientH = this.$refs.clientH;
+      const noScrollBar = this.$refs.head;
+      // 防御判断：元素不存在直接停止自动滚动
+      if (!noScrollBar) return;
 
       this.timer = setInterval(() => {
-        noScrollBar.scrollTop += 1;
-        if (noScrollBar.scrollTop % elNum == 0 && noScrollBar.scrollTop != 0) {
+        // 循环内再次校验ref是否存在，防止中途页面销毁
+        if (!this.$refs.head) {
           clearInterval(this.timer);
-          if (noScrollBar.scrollTop == (this.maxList.length - 4) * elNum) {
-            // noScrollBar.scrollTop = 0;
+          this.timer = null;
+          return;
+        }
+        const bar = this.$refs.head;
+        bar.scrollTop += 1;
+        if (bar.scrollTop % elNum == 0 && bar.scrollTop != 0) {
+          clearInterval(this.timer);
+          this.timer = null;
+          if (bar.scrollTop == (this.maxList.length - 4) * elNum) {
+            setTimeout(() => {
+              if (bar) bar.scrollTop = 0;
+              // 仅组件存在时才重启滚动
+              if (this.$refs.head) this.setIn(elNum, delay);
+            }, delay);
+          } else {
             setTimeout(() => {
-              noScrollBar.scrollTop = 0;
-            }, 2000);
-            // console.log(11111);
+              if (this.$refs.head) this.setIn(elNum, delay);
+            }, delay);
           }
-          setTimeout(() => {
-            this.setIn(elNum, delay);
-          }, delay);
         }
       }, 10);
-
-      // console.log(noScrollBar.scrollTop, (this.maxList.length - 4) * elNum);
     },
     enter(e) {
-      // console.log(e);
-      // e.target.firstChild.style = "display: block";
-      e.target.children[1].style = "display: none";
-      // console.log(e.target.children[1]);
+      e.target.children[1].style.display = "none";
     },
-
     leave(e) {
-      e.target.firstChild.style = "display: none";
-      e.target.children[1].style = "display: none";
-      // console.log(e);
+      e.target.firstChild.style.display = "none";
+      e.target.children[1].style.display = "none";
     }
   }
 };
@@ -517,4 +482,4 @@ export default {
     animation-play-state: paused;
   }
 }
-</style>
+</style>

src/components/portrait/login.vue

@@ -25,8 +25,8 @@ export default {
   name: "LogIn",
   data() {
     return {
-      name: "admin",
-      pwd: "Chuanghai2024.",
+      name: "",
+      pwd: "",
       type: "password",
       flag: true,
     };
@@ -44,10 +44,15 @@ export default {
         .login(data)
         .then((res) => {
           console.log(res);
-          sessionStorage.setItem("key", res.data);
-          this.$router.push({
-            name: "Growing",
-          });
+          if (res.status == 201) {
+            sessionStorage.setItem("key", res.data);
+            this.$router.push({
+              name: "Growing",
+            });
+          }else{
+            this.$message.error("用户名或密码错误");
+            sessionStorage.removeItem("key");
+          }
         })
         .catch((error) => {
           console.log(error);

src/router/index.js

@@ -1,7 +1,5 @@
 import Vue from "vue";
 import Router from "vue-router";
-// import Personal from '@/components/portrait/Personal'
-// import Growing from '@/components/portrait/Growing'
 Vue.use(Router);
 const router = new Router({
   routes: [
@@ -10,7 +8,8 @@ const router = new Router({
       name: "Personal",
       meta: {
         title: "个人页面",
-        requireAuth: true
+        requireAuth: true,
+        keepAlive: true // 需要缓存页面标记
       },
       component: () => import("@/components/portrait/Personal")
     },
@@ -24,13 +23,17 @@ const router = new Router({
       name: "Growing",
       meta: {
         title: "成长页面",
-        requireAuth: true
+        requireAuth: true,
+        keepAlive: true
       },
       component: () => import("@/components/portrait/Growing")
     },
     {
       path: "/login",
       name: "Login",
+      meta: {
+        keepAlive: false // 登录页禁止缓存
+      },
       component: () => import("@/components/portrait/login")
     },
     {
@@ -38,7 +41,8 @@ const router = new Router({
       name: "dorm",
       meta: {
         title: "宿舍实况",
-        requireAuth: true
+        requireAuth: true,
+        keepAlive: true
       },
       component: () => import("@/components/portrait/DormView")
     },
@@ -47,31 +51,33 @@ const router = new Router({
       name: "Map",
       meta: {
         title: "地图页面",
-        requireAuth: true
+        requireAuth: true,
+        keepAlive: true
       },
       component: () => import("@/components/portrait/Map")
     }
   ]
 });
-//这里设置路由拦截
+
+
+
 router.beforeEach((to, from, next) => {
+  // 只要进入登录页，清空本地存储
   if (to.path == "/login") {
     sessionStorage.removeItem("key");
+    sessionStorage.removeItem("studentId");
+    sessionStorage.removeItem("name");
+    sessionStorage.removeItem("id");
   }
-  if (to.meta.requireAuth) {
-    //判断是否需要登录验证
 
+  if (to.meta.requireAuth) {
     const token = sessionStorage.getItem("key");
     if (token) {
       next();
     } else {
-      next({
-        path: "/login" //返回登录界面
-        // query: {redirect: to.fullPath}
-      });
+      next({ path: "/login" });
     }
   } else {
-    //如果不需要登录权限就直接跳转到该路由
     next();
   }
 });