Elelment UI 导航菜单设置路由

最新推荐文章于 2024-06-11 17:08:06 发布
最新推荐文章于 2024-06-11 17:08:06 发布
阅读量659 收藏
点赞数
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sudo0m/article/details/131582834
版权

操作

在 <el-menu>里面添加一个属性 router

router属性 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

Snipaste_2023-07-06_17-58-26
也可以这样写

Snipaste_2023-07-06_17-59-46

然后就在<el-menu-item>把index设置成路径

Snipaste_2023-07-06_17-57-16

效果
Snipaste_2023-07-06_18-00-28

sudo0m
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
elementui 菜单栏添加路由
weixin_35750483的博客
01-02 739
好的，我来帮你解决这个问题。 首先，如果你使用的是 Vue.js 框架，你需要在你的 Vue 项目中安装并引入 ElementUI 组件库。 然后，你可以在你的组件模板中使用 el-menu 组件来创建一个菜单栏。比如： <template> <el-menu> <el-menu-item index="1">菜单项 1</el-menu-it...
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今日问题：Vue++ElementUI --- 导航栏路由跳转方法
weixin_52053631的博客
04-15 1877
【代码】今日问题：Vue++ElementUI --- 导航栏路由跳转方法。
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
element默认选择路由
最新发布
weixin_45859470的博客
06-11 260
【代码】element默认选择路由。
element-ui使用导航菜单 跳转路由 的方法详解
热门推荐
圆圆的 JavaScript 博客
02-23 1万+
使用到vue的路由嵌套，引入element-ui快速搭建一个前端项目，详解如何使用element导航菜单作为跳转路由
vue element UI 学习总结笔记（九）_ 导航菜单与路由
wh_xia_jun的专栏
05-29 5327
获取用户信息 我们把login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息。 router.beforeEach((to, from, next) => { if (!(store.getters.savestate === 0)) { Message({ showClose: true, message: '正在编辑状态中,请先保存', type: 'error' }) next(false) .
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3019
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
element-ui 设置菜单栏展开的方法
10-18
今天小编就为大家分享一篇element-ui 设置菜单栏展开的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
jQuery UI导航菜单按钮.zip
11-19
《jQuery UI 导航菜单按钮：前端开发中的高效实践》 在前端开发中，构建用户友好的交互界面是一项至关重要的任务。jQuery UI 提供了一系列工具和组件，帮助开发者轻松实现这一目标。本教程将深入探讨如何利用 ...
vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换
weixin_52950296的博客
06-09 1万+
vue+elementUI 简单菜单跳转
vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
南北极之间
01-18 1万+
vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
vue项目使用element-UI制作管理系统基本框架（包括菜单折叠，菜单条目路由跳转）
weixin_45711931的博客
04-29 1955
创建首页indexpage.vue文件，内容如下（其他菜单条目页面创建方法一致，内容自己完善）步骤二：引用element-ui（局部引用）和路由模块。在router文件夹下的index.js中设置路由。在main.js文件中按需引用你要使用的组件。步骤三：创建编写主页面home.vue。步骤一：安装element-UI。步骤四：创建菜单条目页面并设置路由。
ElementUI导航菜单通过路由实现页面跳转
kepler星球的博客
03-07 5229
1.index.vue <template> <div> <el-container> <!-- 左边导航栏 --> <el-aside width="250px"> <div class="main"> <aside class="aside"> <!--导航菜单--> &l...
Element-UI中el-menu嵌入路由跳转
m0_62022586的博客
07-24 2192
首先我是用vue cli创建的项目，自定义中选了router路由、vuex等插件。handleSelect为点击切换时打印的路由日志，如无其他操作可不写。其中<router-view />标签的作用为展示配置的路由界面。传的index为路由路径，首页为默认进入时的页面。
el-menu动态加载路由，菜单的解决方案
lc257的博客
11-21 7100
动态从数据库加载路由，菜单
关于Element-ui下拉菜单组件，点击之后页面路由的问题
翻斗花园初级搬运工
05-31 363
技术栈：vue2PC端项目，官网，element-ui背景描述：导航栏使用element-ui中的drop-down组件，写了一个下拉菜单，下拉菜单鼠标悬浮出现，点击之后页面路由，整个导航栏为封装组件。
ElementUI导航栏路由
浮梦一场
02-13 3066
&lt;el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
vue框架element ui 导航菜单路由
05-16
在 Vue 框架中，我们可以使用 Element UI 组件库中的 `el-menu` 和 `el-menu-item` 组件来实现导航菜单。同时，我们可以使用 Vue Router 来实现路由跳转。 以下是一个基本的例子： ```html 首页 关于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值