Elelment UI 导航菜单设置路由

最新推荐文章于 2024-05-09 13:56:15 发布
最新推荐文章于 2024-05-09 13:56:15 发布
阅读量664 收藏
点赞数
文章标签： 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
    评论
今日问题：Vue++ElementUI --- 导航栏路由跳转方法
weixin_52053631的博客
04-15 1885
【代码】今日问题：Vue++ElementUI --- 导航栏路由跳转方法。
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3021
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理(1)
最新发布
2401_84411323的博客
05-09 748
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},text: ‘三级菜单2’,},text: ‘三级菜单3’,},text: ‘三级菜单4’,},id: ‘99’,pid: ‘-1’,text: ‘公司官网’,菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。
ElementUI导航菜单通过路由实现页面跳转
kepler星球的博客
03-07 5244
1.index.vue <template> <div> <el-container> <!-- 左边导航栏 --> <el-aside width="250px"> <div class="main"> <aside class="aside"> <!--导航菜单--> &l...
element-ui侧边栏实现路由跳转：重点是:default-active和router才能正常跳转&默认展开侧边栏:default-openeds
南北极之间
05-21 2万+
关键代码： 在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router------或者router=true 这是一个侧边栏： <el-menu :default-active="this.$route.path" router> <el-submenu index="2"> .
element ui menu-item 关联 router
liubangbo的专栏
07-01 2196
在navMenu 导航菜单中科院el-menu组件设置router属性，官方文档有一下描述：false比较方便，设置此属性后，激活左侧项就能自动跳转到相应的子路由页面。代码如下： path如下所示： 刚开始页面路由如下 http://localhost:8085/smart-park/asset/index 当切换到device菜单时，没有跳转到相应device子路由页面，页面路径如下http://localhost:8085/smart-park/asset/device/index怎么会这样呢？
element-ui 左侧边栏el-menu组件： 路由跳转 - 案例篇
热门推荐
草巾冒小子的博客
03-02 2万+
有顶部导航 、还有侧边栏导航：如何实现路由的设置、跳转、高亮？ A. 顶部导航 · Hhtml 代码如下：（含高亮设置） &amp;amp;amp;lt;el-menu :default-active=&amp;amp;quot;$route.path&amp;amp;quot; class=&amp;amp;quot;el-menu-demo&amp;amp;quot; mode=&amp;amp;quot;horizon
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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 提供了一系列工具和组件，帮助开发者轻松实现这一目标。本教程将深入探讨如何利用 ...
element-ui中使用导航栏组件时跳转路由用法
yueye_wu的博客
09-10 6281
之前做vue项目遇到了这个问题，刚开始有点迷惑，看了好长时间官方文档，终于给摸索出来用法了 话不多说直接上成品，将elemtent ui中nav组件复制，然后我根据当时的项目修改成了如下代码： <el-col :span="3.5"> <el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" ...
记 vue+ElementUI+Ueditor富文本编辑器 打包路径配置
舍曼将军的博客
08-04 651
项目基础路径配置 ElementUI路径配置 Editor路径配置
el-menu嵌套路由高亮
yanby921005的博客
07-03 236
2、一级导航页面配置。
element-ui 路由导航 NavMenu 动态渲染
m0_59547707的博客
08-31 338
NavMenu 动态渲染
ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证
weixin_52104995的博客
04-08 743
验证手机号（我是独立写了一个validator.js文件的，放在util目录下，然后把所有验证规则都写在这里，使用的时候导入即可）/*** 校验规则文件* 触发方式：type=['blur','change']*///定义phone验证全局变量if (!value){callback(new Error('请输入电话号码'))}else if (!callback(new Error('请输入正确的11位手机号码'))}else {callback()required:{
若依vue框架+element ui 组件路由跳转与菜单联动
weixin_46015461的博客
07-10 5003
若依vue框架+element ui 组件路由跳转与菜单联动
el-menu 绑定路由：跳转到二级路由时保持一级菜单高亮
PhoenixGuangyu的博客
05-23 1015
判断当前路由path是否包含el-menu router中的path。使用到字符串的match方法。并设置一个拥有高亮效果的类。但是这样设置有一个问题，当我们跳转到二级路由的时候，el-menu就会失去is-active类名，高亮效果也就随即消失。这里代码实现很简单，只需要使用深度选择器 找到el-menu上的is-active，修改相应的样式即可。需求：在当前菜单项进行操作时，保持一级菜单高亮。
Vue el-menu-item实现路由跳转
weixin_62355341的博客
04-14 2万+
场景：用了element-ui的el-menu 菜单 怎样实现路由跳转呢？ 1，在el-menu加上router，添加el-menu的default-active属性，加：动态绑定，值设置为"this.$router.path" ， 2，将el-menu-item的index设置为路由跳转path，和route.js相对应 代码： <el-menu router :default-active="this.$router.path" class="...
vue框架element ui 导航菜单路由
05-16
在 Vue 框架中，我们可以使用 Element UI 组件库中的 `el-menu` 和 `el-menu-item` 组件来实现导航菜单。同时，我们可以使用 Vue Router 来实现路由跳转。 以下是一个基本的例子： ```html <template> <div> <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item index="1"> <router-link to="/home">首页</router-link> </el-menu-item> <el-menu-item index="2"> <router-link to="/about">关于我们</router-link> </el-menu-item> <el-menu-item index="3"> <router-link to="/contact">联系我们</router-link> </el-menu-item> </el-menu> <router-view></router-view> </div> </template> <script> export default { methods: { handleSelect(index) { console.log(index); }, }, }; </script> ``` 在上面的例子中，我们先使用 `el-menu` 组件创建了一个垂直方向的菜单，并设置了默认选中的菜单项为第一个。然后，我们使用 `el-menu-item` 组件创建了三个菜单项，并在每个菜单项中使用 `router-link` 组件来设置路由跳转的目标路径。 最后，我们使用 `router-view` 组件来渲染实际的页面内容。 在 Vue Router 中，我们需要在路由配置中设置每个路由对应的组件，例如： ```javascript import Vue from "vue"; import VueRouter from "vue-router"; import Home from "@/views/Home.vue"; import About from "@/views/About.vue"; import Contact from "@/views/Contact.vue"; Vue.use(VueRouter); const routes = [ { path: "/", redirect: "/home", }, { path: "/home", component: Home, }, { path: "/about", component: About, }, { path: "/contact", component: Contact, }, ]; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes, }); export default router; ``` 在路由配置中，我们首先设置了根路径 `/` 的重定向到 `/home`，然后分别设置了 `/home`、`/about` 和 `/contact` 路径对应的组件。 在实际开发中，我们可以根据需要进一步定制菜单的样式和行为，例如添加二级菜单、设置菜单的图标等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值