Vue结合Element-UI实现多级菜单导航栏

本文介绍了如何在Vue项目中结合Element-UI实现动态多级菜单导航栏。通过构建数据变量levelList并根据路由动态更新,设置每个菜单项的跳转路由和页面名称。在router.js中配置好路由,利用Vue监听路由变化,实现实时更新菜单。最后展示了实现后的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在需要加入导航栏的组件内添加面包屑导航栏,构建出一个可以根据路由动态改变其值的数据变量 { levelList },循环levelList,为每一个item设置点击时的跳转路由

<el-breadcrumb class = "app-breadcrumb" separator = "/">
  <transition-group name = "breadcrumb">
     <el-breadcrumb-item v-for = "(item,index) in levelList" v-if = "item.meta.title" :key = "item.path">
       <span v-if = "item.redirect === 'noredirect' || index == levelList.length - 1" class = "no-redirect" > {
  
  { item.meta.title }} </span>
       <!-- 设置跳转路由 -->
       <router-link v-else :to = "{ path: item.redirect || item.path,  query: item.query }"> {
  
  { item.meta.title }} </router-link>
     </el-breadcrumb-item>
   </transition-group>
 </el-breadcrumb>

现在来拼接出跳转路由需要的信息:页面路由值:{ path } 、页面名称:{ title }:
附上一条我的router.js内的路径配置:

{path: '/ruleIndex', name: '首页', component: RuleIndex},

根据路由可以直接取到path和其对应的中文名。

//需要引入path-to-re
### 如何使用 Element UI 实现顶部导航栏 要在项目中实现一个基于 Element UI 的顶部导航栏,可以按照以下方法操作: #### 安装依赖库 确保已经安装 `element-ui` 库。如果尚未安装,则可以通过命令行工具执行下面的指令来完成安装[^2]: ```bash cnpm i element-ui -S ``` #### 导入并注册 Element UI 组件 在项目的入口文件(通常是 main.js 或 app.js 中),导入整个 Element UI 库及其样式表,并将其作为全局插件注册[^1]: ```javascript // 引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 使用插件 Vue.use(ElementUI); ``` #### 创建顶部导航栏组件 创建一个新的 Vue 组件用于展示顶部导航栏,在此组件内部定义所需的数据属性以及事件处理逻辑。 ```html <template> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"> <el-menu-item index="1">首页</el-menu-item> <el-submenu index="2"> <template slot="title">服务介绍</template> <el-menu-item index="2-1">产品A</el-menu-item> <el-menu-item index="2-2">产品B</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="/about-us" target="_blank">关于我们</a></el-menu-item> </el-menu> </template> <script> export default { data() { return { activeIndex: '1', }; }, }; </script> ``` 上述代码片段展示了如何利用 `<el-menu>` 和其子元素构建水平方向上的菜单项。通过设置不同的参数如 `mode`, 可以轻松调整布局风格;而借助于嵌套结构则能够呈现多级下拉列表效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值