Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

最新推荐文章于 2024-08-22 19:38:13 发布
最新推荐文章于 2024-08-22 19:38:13 发布
阅读量661 收藏 1
点赞数
分类专栏： Web 文章标签： web vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISIS7Protessional/article/details/106815390
版权
本文详细介绍了如何使用Vue和ElementUI构建前端页面的导航菜单及路由跳转。主要内容包括导航菜单配置，通过页面、菜单、路由的配置实现页面间的跳转，并在main.js中进行相应设置。同时，文章提供了针对导航栏样式问题的解决方案和菜单的独立管理方法。
摘要由CSDN通过智能技术生成

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

本文主要介绍导航菜单的配置以及导航栏跳转路由（vue路由实现页面跳转）的方法。

目录

一、 导航菜单配置

二、 路由跳转

2.1 页面配置

2.2 菜单配置

2.3 路由配置

2.4 main.js配置

 

一、 导航菜单配置

elementui导航栏 使用这个官网demo即可，可以结合 页面布局 将导航栏配置在左侧边栏。对于导航栏展开后子菜单会多出一点点的问题，可以通过配置如下样式解决：

.el-menu{
    border-right-width: 0
最低0.47元/天 解锁文章
Backup and share
关注
专栏目录
Element-UI组件之导航Navigation
TwentyOne__的博客
07-04 4213
Element-UI组件之导航NavigationNavMenu 导航菜单顶栏侧栏折叠Tabs 标签页基础用法 NavMenu 导航菜单 顶栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item ...
Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)
ISIS7Protessional的博客
03-22 1789
Vue+elementUI 从头开始构建项目（一：从starter模板开始） 一、了解 Vue:渐进式JavaScript 框架 官网：https://cn.vuejs.org/ Element 网站快速成型工具：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网：https://element.eleme.cn/#/zh-CN 二、环境准备...
从0开始搭建Element项目
weixin_30376083的博客
11-22 361
第一步：安装 Node.js/NPM 　　下载Node.js：https://nodejs.org/zh-cn/download/ 　　下载安装即可。 第二步：安装 vue-cli 　　打开 cmd 创建，在命令行下执行命令即可安装: npm install -g @vue/cli 　　安装完后，会有一个 vue 命令可以被调用:　　 vue --v...
Vue组件库Element和Vue路由
最新发布
2202_75483664的博客
08-22 1395
之前讲解的前端开发模式MVVM，我们之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。，我们主要学习的是ElementUI中提供的常用组件，至于其他组件可以通过我们这几个组件的学习掌握到ElementUI的学习技巧，然后课后自行学习。接下来我们来学习一下ElementUI的常用组件，对于组件的学习比较简单，我们只需要参考官方提供的代码，然后复制粘贴即可。
ElementUI前端页面开发
sinat_41772813的博客
03-02 755
最近完成了elementui的前端开发，遇到不少问题，包括ui、路由、过度动画、css等等，这两天有时间我会全部列出来，有正在写的新手可以一起互相交流一下。
Navigation 导航菜单
01-04
Navigation 导航菜单 适合初学者 Navigation 导航菜单
Navigation-NavMenu 导航菜单
hrbsfdxzhq01的博客
01-25 2054
  &lt;!-- 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了 background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 --&gt; &lt;div id="app"&gt; &lt;el...
vue+elementUI管理系统页面源代码
02-12
总的来说，这个“vue2+elementUI后台管理系统”项目是一个完整的前端解决方案，结合Vue.js的灵活性、Element UI的美观组件和Vue Router的路由管理，可以快速构建出功能完善的后台管理系统。开发者只需导入项目，根据...
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
vue+elementUI管理系统，页面源代码
11-10
总结起来，本项目是一个基于Vue2和ElementUI的后台管理系统，通过组件化的开发方式，实现了页面的动态路由、数据交互以及状态管理，同时利用ElementUI提供的丰富UI组件，创建了高效的后台工作环境。对于初学者和...
element ui框架（路由）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-18 1366
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 有过web后端开发经验的同学，相信对路由这个概念应该不陌生。后端开发一般使用的是mvc，其中c，也就是controller，对应的就是各个路由的接口。现在随着整个前后端开发越来越独立化，两者之间只有数据的交互，所以这部分路由工作也开始转到前端来完成。 回到前端开发，当前其实已经有一个第三方库可以完美支持前端路由了，这就是vue-router。在用vue-cli创建项
element-starter(添加路由route).zip
07-17
后端管理的初级框架，基于element-starter(添加路由route)
element ui 路由配置
愤怒的苹果ext的博客
12-17 1184
目录创建router修改main.jsApp.vue加入router-view标签其他 创建router router/index.js代码如下所示 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ mode: 'history', // 如果不加这段代码
手摸手Element-ui路由VueRoute
weixin_47268883的博客
11-27 1010
Element-ui路由VueRoute
vue element 导航路由跳转点击样式
qq_45101496的博客
06-16 355
懂的自然懂， <template> <div class="recruittop"> <el-menu :default-active="this.$route.path" router mode="horizontal"> <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-it
li navigation menu
风中之枫
06-15 424
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html http://www.howtocreate.c
简单的Element UI前端框架-页面路由
wwyywwsaber的博客
04-02 718
Element UI 构建：https://blog.csdn.net/wwyywwsaber/article/details/123923154 在components目录下添加3个页面，分别为login.vue、home.vue、404.vue；3个页面内容简单相似，代码如下： <template> <div class="page"> <h2>Home Page</h2> </div> </temp
导航栏菜单 vue 树形_Vue.js树导航菜单
cuk5239的博客
07-24 1235
导航栏菜单 vue 树形 导航树导航 (vue-tree-navigation) A Vue.js tree navigation menu with unlimited number of levels and minimum styles included Vue.js树导航菜单，其中包含无限数量的级别和最小样式 View demo 查看演示 Download Source 下载源 ...
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2311
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
Vue+ElementUI构建大学生健康档案管理系统前端
资源摘要信息: "该文档包含...通过了解和运用上述知识点，开发者可以更好地理解和运用Vue+ElementUI构建大学生健康档案管理系统前端的代码和技术，同时掌握权限管理、模块化开发和响应式设计等在实际项目开发中的应用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值