vue-admin-template 自学1-基于路由修改页面登陆菜单布局

最新推荐文章于 2024-05-06 18:13:46 发布
最新推荐文章于 2024-05-06 18:13:46 发布
阅读量967 收藏 1
点赞数
分类专栏： vue小白炼成记 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/108334479
版权
本文介绍了如何根据项目需求修改vue-admin-template的登录后页面布局，包括在layout/index.vue中去除二级子菜单和navbar，调整router/index.js以替换默认路由，并在views/geo/index.vue中添加自定义组件实现。
摘要由CSDN通过智能技术生成

因项目需要，需要改变vue-admin-template 登陆后页面布局

1、布局试图在layout/index.vue中，因为我这里的菜单不含二级子菜单，且不需要右上角的登陆试图，所以屏蔽掉二级子菜单和navbar

2、修改路由router/index.js，删掉默认的dashboard，添加自己的默认页面

3、在视图中添加geo组件实现，views/geo/index.vue组件，在组件中填写自己的实现

4、基本上默认效果如下

cici_cmh
关注
专栏目录
vue-admin-template 自学2-添加自定义登陆状态
chpswg的专栏
09-01 453
项目需要在左侧菜单树的底部添加登陆状态显示，由于上一篇中已经屏蔽了默认的navbar状态菜单，这里，可以添加自定义的loginBar组件 1、在sideBar文件夹下新建loginBar组件 2、登陆状态的现实，对于已经登陆的，要显示登出log out　按钮，这里绑定ｉｓＬｏｇｉｎ　来显示，当组件初始化后，通过计算ｉｓＬｏｇｉｎ中获取登录ｔｏｋｅｎ来获取登陆状态，从而切换　ｌｏｇｏｕｔ　菜单的现实 ３、退出登录实现 d对于已经登陆的用户，显示了og　out　按钮，点击log　out，可实现退
Vue3-admin-template 框架修改登录页面
xiaowude_boke的博客
11-14 505
vue3框架的使用
vue-admin-template配置快捷导航的代码（标签导航栏）
10-14
主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
已解决：vue-admin-template动态菜单（不从后台获取菜单数据、动态路由、页面刷新404问题）
weixin_45213585的博客
06-14 1503
实现不访问后台的动态菜单。解决页面刷新404的问题
Vue - vue-admin-template模板项目改造：动态获取菜单路由
iotjin的专栏
04-27 2135
1、demo中的项目已经添加了TagsView功能和本地权限控制关于TagsViewVue - vue-admin-template模板项目改造：增加TagsView功能关于本地权限控制相关代码参考的permission-control分支2、并且demo中的项目在1的基础上增加TopHeader（顶栏）功能，在顶栏中显示项目标题和用户信息，即可以支持原有方式展示，又可以通过setting配置显示顶栏关于增加TopHeader（顶栏）
Vue模板框架vue-admin-template上手指南
rainafter1208的博客
04-17 2484
本文介绍了vue后台前端的快速上手步骤
vue-admin-template极简的 vue admin 管理后台的动态路由实现方法
UserGuan的博客
03-20 2125
注意：项目中的路由均写在中，其中默认包含数组，这是固定路由，无论用户是什么角色，都需要显示这些路由内容(即导航栏)。为了根据权限来动态的生成路由，我们需要添加数组，这里面的内容将根据用户角色权限动态生成路由内容(即导航栏)。实现方法：① 在中，通过分析里面的角色权限和当前用户所拥有的角色权限，生成用户可查看到的路由列表。② 在中，遍历显示菜单栏。
vue-admin-template 动态路由的实现（方式一）
最新发布
2401_84152797的博客
05-06 935
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue-admin-template 动态路由的实现（方式一），解析底层原理
2401_83945851的博客
03-28 798
外链图片转存中…(img-KhvaEut5-1711588550142)][外链图片转存中…(img-5S4Wf129-1711588550142)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！[外链图片转存中…(img-rHFzL3sY-1711588550143)][外链图片转存中…(img-L2h8cseS-1711588550143)]
vue-admin-template 动态路由的实现（方式一），2024高级Linux运维笔试总结
2301_77116622的博客
04-14 653
本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。
关于vue单页面应用访问路径添加项目名的设置步骤
zhangkegu的博客
08-19 6292
我想要的访问路径效果如图： 1.在index.html的头部中设置红框圈中的代码： 2.在router.js中设置路由模式如下（设置history是为了去掉默认的#锚点）： 3.在vue.config.js中设置公共根路径如下: 4.在开发和生产环境中设置默认基路径，防止首次进入页面未点击路由导航时不显示页面： 如有更好的方法，请留言指教。谢主隆恩啦！ ...
展示默认路由
zhouyuqin01的博客
12-09 500
当两个路由切换，默认显示的路由 path 为 空 就行。 const router = new VueRouter({ routes:[ { path:'/', component: Layout, children:[ { path:'', component:Table
vue pure admin首页
weixin_74792796的博客
07-03 1025
【代码】vue pure admin首页。
vue-admin-template + element-ui 改造table组件实现二次封装简化调用(二)
ithover的博客
04-26 394
上次使用vue具名插槽的方式来实现了table表格的封装，这次换一种更实现方式，让页面代码变得更加简洁，先说一下这次使用的是动态组件来实现封装，话不多说，直接上代码 ###table封装 <template> <el-table :data="tableData" style="width: 100%"> <template v-for="(column,index) in tableHead"> <el-table-column :key=
vue-element-admin动态菜单改造,含数据库以及前端目录结构参考
m0_53899978的博客
12-12 1795
向handleLogin中添加dispatch( "permission/generateRoutes",userRoles)
vue3+antd搭建登录页面——vue3初体验——基础积累
yehaocheng520的博客
07-21 1166
vue3+antd搭建登录页面——vue3初体验——基础积累
Breadcrumb去除Dashboard
qq_43499191的博客
01-08 589
去除前 去除后 方法： 注销掉
vue完整的登陆页面开发
X_W123的博客
05-26 1619
** 完整的登陆页面开发 **，组件使用的是vant ui，具体用法可去官网看。 分几个部分考虑， 一、输入框input的校验：1、blur时没有值和格式不符合的逻辑校验 2、限制输入长度逻辑，比如手机号只能11位，验证码只能6位。 二、验证码按钮逻辑： 1、不同状态下验证码颜色，文案，是否能点击，是否显示记数需要兼顾。 2、验证码能够正常点击是在手机号格式正确情况下，所以这里要有个监听手机号，一旦格式符合，验证码生效 3、关于计数器的逻辑。 以下会从上面的点开考虑： 一、input的校验没有可说的，记住俩
vue-admin-template和vue-element-admin
09-13
vue-admin-template和vue-element-admin是两个不同的项目。 vue-admin-template是一个基于vue-element-admin的后台管理系统基础模板，可以作为模板进行二次开发。它提供了一个简洁的基础框架，适合用于中小型后台管理项目的开发。你可以从GitHub上获取它的源代码，GitHub地址是https://github.com/PanJiaChen/vue-admin-template 。 而vue-element-admin是一个丰富的组件库，它包含了很多常用的组件和功能，可以作为一个工具箱。你可以从vue-element-admin中复制你需要的功能或组件到vue-admin-template中进行二次开发。这样可以加快开发速度，并且确保功能的完整性和稳定性。 总结起来，vue-admin-template是一个基础的后台管理系统模板，适合二次开发，而vue-element-admin是一个组件库，可以作为工具箱供开发者使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值