微人事-创建前端vue组件，并从数据库加载页面

最新推荐文章于 2024-02-09 20:03:05 发布

azto

最新推荐文章于 2024-02-09 20:03:05 发布

阅读量1k

点赞数

分类专栏：项目文章标签： vue

本文链接：https://blog.csdn.net/weixin_39232166/article/details/106508246

版权

本文详细介绍了如何创建前端Vue组件，包括在添加组件后的处理、何时调用工具方法、处理页面刷新后的数据加载，以及设置左侧菜单图标和实现登录页面回车登录功能。通过使用路由守卫和Vuex，确保页面刷新时仍能正确加载数据，并展示了Font Awesome图标库的集成方法。

摘要由CSDN通过智能技术生成

创建前端vue组件

创建组件页面
在这里插入图片描述

当添加了组件后

以下代码将找不到对应的页面

            // 整理成对应的格式 并且动态的加载菜单页
            let fmRouter={
   
                path:path,
                name:name,
                iconCls:iconCls,
                meta:meta,
                children:children,
                component(resolve){
   
                    require(['../views/'+component+'vue'],resolve)
                }
            }

修改如下处理
判断component是不是以Emp开头以此类推并指定对应的路径

            component(resolve){
   
                if (component.startsWith("Home")) {
   
                    require(['../views/'+component+'.vue'],resolve);
                }else if (component.startsWith("Emp")){
   
                    require(['../views/emp/'+component+'.vue'],resolve);
                }else if (component.startsWith("Per")){
   
                    require(['../views/per/'+component+'.vue'],resolve);
                }else if (component.startsWith("Sal"