Vue 项目中登录组件重复加载及页面加载问题的排查与解决

于 2024-10-03 23:16:13 发布
阅读量431 收藏 8
点赞数 12
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57836225/article/details/142697714
版权

目录

《Vue 项目中登录组件重复加载及页面加载问题的排查与解决》

一、问题描述

登录组件重复加载

页面一直加载转圈

二、问题排查与解决

登录组件重复加载问题

1. 路由配置文件（router/index.ts）

2. LoginPage.vue组件自身

3. LoginForm.vue组件引用

页面一直加载转圈问题

1. 路由守卫中的useStore问题

2. 路由重定向逻辑

三、总结

在 Vue 项目开发过程中，我们常常会遇到各种问题。本文将详细介绍在一个象棋游戏 Vue 项目中遇到的登录组件重复加载以及页面一直加载转圈的问题，包括问题的分析过程和相应的解决方法。

一、问题描述

登录组件重复加载

在项目中，发现登录页面（LoginPage.vue）及其包含的登录表单组件（LoginForm.vue）被重复加载。从控制台日志可以看到，LoginPage组件的created和mounted钩子函数以及LoginForm组件的created和mounted钩子函数都被执行了两次。

页面一直加载转圈

在对路由守卫相关代码进行修改后，页面出现一直加载转圈的情况，无法正常显示内容。

二、问题排查与解决

登录组件重复加载问题

1. 路由配置文件（router/index.ts）

  • 问题分析
    • 在router/index.ts的beforeEach路由守卫中，对登录状态的判断和重定向逻辑可能存在问题。当用户未登录且访问某些需要登录的页面（如'/navigation'、'/game'、'/lobby'）时，会重定向到登录页面（'/'）。但是，如果在某些特殊情况下，比如当前页面已经是登录页面，可能会因为没有正确处理这种情况而导致重复重定向，进而使登录组件重复加载。
  • 解决方法
    • 对路由守卫逻辑进行修改，添加更多的判断条件。以下是修改后的router/index.ts关键代码片段：

import { createRouter, createWebHistory } from 'vue-router';
import LoginPage from '../pages/LoginPage.vue';
import NavigationPage from '../pages/NavigationPage.vue';
import ChessGamePage from '../pages/ChessGamePage.vue';
import GameLobbyPage from '../pages/GameLobbyPage.vue';
import { useStore } from 'vuex';

const routes = [
    { path: '/', component: LoginPage },
    { path: '/navigation', component: NavigationPage },
    { path: '/game', component: ChessGamePage },
    { path: '/lobby', component: GameLobbyPage },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    const store = useStore();
    console.log('路由守卫 - beforeEach', to.path, from.path);
    const isLoggedIn = store.state.auth.isLoggedIn;
    if (to.path === '/') {
        if (isLoggedIn) {
            // 如果已经登录，重定向到导航页面（可根据实际需求调整）
            next('/navigation');
        } else {
            next();
        }
    } else if (to.path === '/navigation' || to.path === '/game' || to.path === '/lobby') {
        if (!isLoggedIn) {
            // 如果未登录且访问需要登录的页面，重定向到登录页面
            if (from.path!== '/') {
                next('/');
            } else {
                // 如果当前页面已经是登录页面，不进行重定向
                next(false);
            }
        } else {
            next();
        }
    } else {
        next();
    }
});

router.afterEach((to, from) => {
    console.log('路由此题 - afterEach', to.path, from.path);
});

export default router;

2. LoginPage.vue组件自身

  • 问题分析
    • 组件内部可能存在一些条件渲染逻辑或者与其他组件的交互逻辑，导致其被多次加载。虽然从提供的代码中暂时没有发现明显问题，但需要进一步排查。
  • 解决方法
    • 在LoginPage.vue的template部分添加一个唯一的key属性，以便 Vue 能够更准确地识别组件的实例。修改后的LoginPage.vue部分代码如下：

<template>
  <div class="login-page" :key="'login-page-key'">
    <LoginForm />
  </div>
</template>
<script lang="ts">
import LoginForm from '../components/LoginForm.vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    LoginForm,
  },
  created() {
    console.log('LoginPage - created');
  },
  mounted() {
    console狠簡 - mounted');
  },
});
</script>
<style scoped>
.login-page {
  background-image: url('../assets/images/login-background.jpg');
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3. LoginForm.vue组件引用

  • 问题分析
    • 在LoginPage.vue中对LoginForm组件的引用方式可能存在问题，或者组件自身的某些逻辑导致了多次创建和挂载。
  • 解决方法
    • 检查LoginPage.vue中对LoginForm组件的引用是否正确，确保只有一处引用。同时，在LoginForm.vue的template部分也添加一个唯一的key属性。修改后的LoginForm.vue部分代码如下：

<template>
  <div :key="'login-form-key'">
    <h2>Login Form</h2>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">Login</button>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
    };
  },
  created() {
    console.log('LoginForm组件 - created');
  },
  mounted() {
    console.log('LoginForm组件 - mounted');
  },
  methods: {
    login() {
      // 假设调用API进行登录，模拟登录失败的情况
      if (username === 'wrong' && password === 'wrong') {
        this.errorMessage = 'Invalid username or password';
      } else {
        // 成功登录的逻辑
      }
    },
  },
});
</script>
<style scoped>
.error {
 只、色: red;
}
</style>

页面一直加载转圈问题

1. 路由守卫中的useStore问题

  • 问题分析
    • 在路由守卫中使用了useStore来获取Vuex的store实例。如果useStore没有正确获取到store，可能会导致后续对store.state的访问出现问题，从而影响路由的正确跳转和页面加载。
  • 解决方法
    • 直接导入store实例，避免了useStore可能出现的获取不到store的问题。修改后的router/index.ts部分代码如下：
import { createRouter, createWebHistory } from 'vue-router';
import LoginPage from '../pages/LoginPage.vue';
import NavigationPage from '../pages/NavigationPage.vue';
import ChessGamePage from '../pages/ChessGamePage.vue';
import GameLobbyPage from '../pages/GameLobbyPage.vue';
import store from '../store/index'; // 直接导入store实例

const routes = [
    { path: '/', component: LoginPage },
    { path: '/navigation', component: NavigationPage },
    { path: '/game', component: ChessGamePage },
    { path: '/lobby', component: GameLobbyPage };
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    console.log('路由守卫 - beforeEach', to.path, from.path);
    const isLoggedIn = store.state.auth.isLoggedIn;
    if (to.path === '/') {
        if (isLoggedIn) {
            // 如果已经登录，重定向到导航页面（可根据实际需求调整）
            next('/navigation');
        } else {
            next();
        }
    } else if (to.path === '/navigation' || to.path === '/game' || to.path === /lobby') {
        if (!isLoggedIn) {
            // 如果未登录且访问需要登录的课件，重定向到登录页面
            if (from.path!== '/') {
                next('/');
            } else {
                // 如果当前页面已经是登录页面，不进行重定向
                next(false);
            }
        } else {
            next();
        }
    } else {
        next();
    }
});

router.afterEach((to, from) => {
    console.log('路由守卫 - afterEach', to.path, from.path);
});

export default router;

2. 路由重定向逻辑

  • 问题分析
    • 路由重定向逻辑可能存在问题，导致页面陷入无限循环的重定向或者不正确的跳转路径。
  • 解决方法
    • 仔细检查beforeEach函数中的重定向条件。确保每个条件分支都能正确地引导页面到预期的路径。在每个关键的条件判断和重定向操作处添加日志输出，以便更好地理解路由的行为。修改后的router/index.ts部分代码如下：

import { createRouter, createWebHistory } from 'vue-router';
import LoginPage from '../pages/LoginPage.vue';
import NavigationPage from '../pages/NavigationPage.vue';
import ChessGamePage from '../pages/ChessGamePage.vue';
import GameLobbyPage from '../pages/GameLobbyPage.vue';
import store from '../节制store/index'; // 直接导入store实例

const routes = [
    { path: '/', component: LoginPage },
    { path: '/navigation', component: NavigationPage },
    { path: '/game', component: ChessGamePage },
    { path: '/lobby', component: GameLobbyPage };
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    console.log('路由守卫 - beforeEach', to.path, from.path);
    const isLoggedIn = store.state.auth.isLoggedIn;
    if (to.path === '/') {
        if (isLoggedIn) {
            // 如果已经登录，重定向到导航页面（可根据实际需求调整）
            next('/navigation');
        } else {
            next();
        }
    } else if (to.path === '/navigation' || to.path === '/game' || to.path === /lobby') {
        if (!isLoggedIn) {
            // 如果未登录且访问需要登录的课件，重定向到登录页面
            if (from.path!== '/') {
                next('/');
            } else {
                // 如果当前页面已经是登录页面，不进行重定向
                next(false);
            }
        } else {
            next();
        }
    } else {
        next();
    }
    // 添加一个日志，用于确认路由守卫执行完毕且没有出现异常重定向
    console.log('路由守卫 - beforeEach执行完毕，将跳转到', to.path); 
});

router.afterEach((to, from) => {
    console.log('路由守卫 - afterEach', to.path, from.path);
});

export default router;

三、总结

通过对上述问题的排查和解决，我们可以看到在 Vue 项目中，一个看似简单的问题可能涉及到多个方面的知识和技巧。在遇到问题时，我们需要仔细分析控制台日志、检查相关组件和路由的代码逻辑，通过逐步排查和修改来解决问题。同时，在开发过程中保持良好的代码规范和习惯，对于预防和解决问题都具有重要意义。

请注意，上述博客文章中的代码可能存在一些排版和复制粘贴错误，如果要实际使用，请仔细检查和调整代码。

阿贾克斯的黎明
关注
专栏目录
vue中gif加载一次_Vue加载优化，速度提高一倍。
weixin_30270475的博客
12-29 1037
本文首发于个人公众号【Java技术大杂烩】，欢迎关注。前言之前做的一个Vue项目，流程大概这这样的：从公众号进入，由外系统获取用户的openid等信息，然后再跳转到项目首页进行加载初始化操作。业务最近反应进入首页很慢，于是大致排查了下，由于外系统需要去微信获取用户授权，用户的的openid，调用定位接口获取位置等信息，想着会不会是他们的问题，经过沟通，他们也是按照微信的接口文档进行操作，没有什么优...
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
10-18
以下是针对Vue.js项目打包后首屏加载优化的一些关键点以及可能遇到的问题及解决方案。 **一、使用CDN资源** 将依赖库如Vue、axios、vuex和vue-router等通过Content Delivery Network (CDN) 外链引入，可以显著减少...
排查 Vue 项目中内容重复渲染问题
最新发布
m0_57836225的博客
10-03 602
排查 Vue 项目中的内容重复渲染问题需要系统地检查各个部分的代码。通过重点排查上述目录，我们可以更有针对性地找到问题的根源，并采取相应的措施进行修复。在开发过程中，我们应该保持良好的代码结构和规范，避免出现类似的问题，以提高项目的质量和用户体验。
vue实际项目中遇到的问题及解决整理
接着奏乐接着舞的博客
08-01 9045
本篇文章取自实际项目，整理了共45个问题和他的解决方法，全文1.5万字。
vue页面滚动加载、页面懒加载
Bright2017的博客
11-10 1525
需求：页面有一堆图表、需要滚动到图表时、再加载出来这个图表、 思路：没找到合适的插件、只能自己手撸一个、直接放到混入里就行、主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可
vue3组件加载顺序踩坑记录
weixin_44368048的博客
08-16 2500
vue组件加载顺序 vue父组件监听子组件生命周期
解决 Vue 项目页面空白问题的排查之旅
m0_57836225的博客
10-03 534
在开发 Vue 项目的过程中，我们难免会遇到各种问题。最近，我在开发一个象棋游戏项目时，就遇到了一个令人困扰的问题：项目启动后页面是空白的。经过一番排查，我总结了以下的排查思路和方法，希望能对其他开发者有所帮助。
Vue 页面反复刷新常见问题及解决方案
繁依Fanyi的博客
09-12 842
Vue.js 是一个强大的前端框架，但在开发过程中，页面反复刷新的问题可能会影响用户体验和开发效率。本文详细分析了导致页面刷新问题的常见原因，并提供了相应的解决方案。通过优化配置、正确使用路由、合理管理数据状态、正确使用第三方库以及配置浏览器缓存，开发人员可以有效地解决页面刷新问题，提升应用的稳定性和用户体验。希望本文能为广大 Vue.js 开发者提供有价值的参考和帮助。通过本文的学习，相信读者能够更好地应对 Vue.js 开发中的页面刷新问题，打造更加流畅和高效的前端应用。
vue版本升级导致vant这个UI组件中的loading失效问题
时清云的博客
07-29 2290
对于vue版本升级，我们一定要谨慎。对于现有的运行项目，我们一定要尽量锁定版本，保证项目稳定运行
如何vue使用ant design Vue中的select组件实现下拉分页加载数据，并解决存在的一个问题。
前端开发小白9527
04-20 7459
如何vue使用ant design Vue中的select组件实现下拉分页加载数据，并解决存在的一个问题。
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
总之，解决Vue组件未显示的问题，需要从组件注册、模板结构、命名规则、数据绑定和生命周期等多个角度进行排查。记住，Vue的错误信息通常很清晰，如果出现了问题，它会给出明确的提示。如果没有错误信息，那么很可能...
vue项目出现页面空白的解决方案
10-16
在使用Vue.js框架进行前端开发时，页面空白问题是...在实际工作中，遇到页面空白或其他问题，应当耐心地一一排查，遵循最佳实践，逐步定位到问题所在，并采取正确的解决措施。这样才能确保Vue项目的稳定性和用户体验。
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
10-14
在遇到类似问题时，首先要检查路由配置，然后排查缓存和浏览器行为，最后考虑其他可能的因素，如组件加载、路由守卫等。通过逐步排查，通常能找到问题的根源并解决。希望这篇文章能帮助你理解和解决Vue中重定向的...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 796
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1162
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 856
自定义指令
计算机毕业设计 基于Python的智能文献管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
10-03 1470
本文介绍了一款基于Python的智能文献管理系统，该系统通过自动化的数据爬虫和文本挖掘技术，为用户提供了文献信息的收集、管理和分析服务。系统的主要功能包括用户管理、文献类型管理、文献信息管理、文献注释管理、在线论坛和系统管理等。该系统旨在提高学术文献管理的效率和质量，促进学术资源的共享与交流，对提升学术研究的质量和效率具有重要的价值。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 525
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值