elementUI的导航栏怎么根据路由默认选中相关项

最新推荐文章于 2024-05-13 10:00:56 发布
最新推荐文章于 2024-05-13 10:00:56 发布
阅读量1.5k 收藏 3
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/XHappyness/p/7682944.html
版权

1. 

<el-menu :default-active="this.$route.path.substr(1)" class="left-nav">

2. 

el-submenu或者el-menu-item的index设置成路由对应的字符串
 
 
比如：路由为http://localhost:8080/#/project/list时，将需要被选中的el-submenu或者el-menu-item的index设置为 index="project/list"
 
 
----------------------------------------------------------------------------------加强版-----------------------------------------------------------------------------------------------
也是根
最低0.47元/天 解锁文章
weixin_34088583
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui使用导航栏跳转路由的用法详解
12-29
最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要...
vue2.0 elementUI制作面包屑导航栏
08-28
7. ElementUI 面包屑导航栏 separator 属性：在组件中，我们使用了ElementUI的面包屑导航栏组件，并设置了separator属性为"/"，以便在面包屑导航栏项之间显示"/"符号。 8. 组件数据绑定：在组件中，我们使用了data...
使用element-ui的el-menu刷新保持选中状态
过分安静博客
07-26 4235
使用element-ui的el-menu刷新保持选中状态
element-ui 中的 NavMenu 导航菜单 el-menu-item标签 自定义默认被选中
weixin_44647098的博客
09-09 9098
是选中的 ‘1’ 默认选中的 num 至于这个num 就是 你 循环出来的 的数值 <template> <div id="index"> <el-menu :default-active="'1'" router mode="horizontal" background-color="white" text-color="#222" ...
el-menu 保持展开点击不收缩 默认选择第一个菜单
最新发布
szzlh123456789的博客
05-13 928
【代码】el-menu 保持展开点击不收缩 默认选择第一个菜单。
使用element-ui的＜el-menu＞循环＜el-menu-item＞不会默认选中
weixin_42947972的博客
04-15 2839
使用element-ui的<el-menu>循环<el-menu-item>不会默认选中 问题代码: <template v-for="(menu, i) in menuInfo"> <el-menu-item :index="(i+1)"> <template slot="title"> <i :class="menu.ico"></i> &l
Vue中使用el-menu高亮显示问题
weixin_43336525的博客
08-28 2023
在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示
对 el-menu 的回顾使用（实现进入页面默认选择以及路由跳转）
weixin_52890961的博客
08-19 2405
对 el-menu 的回顾使用（实现进入页面默认选择以及路由跳转） 主要提示自己如何使用，所以直接附上代码，大家仅供参考（基于vue） <template> <div class="tab"> <el-menu :default-active="'/state/stateTable'" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
vue使用ElementUI时导航栏默认展开功能的实现
08-27
Vue 使用 ElementUI 时导航栏默认展开功能的实现 知识点： 1. ElementUI 导航栏默认展开功能的实现原理 在使用 ElementUI 时，默认情况下，导航栏是不能展开的。这是因为 ElementUI 的设计理念是让用户手动展开...
vue elementUI使用tabs与导航栏联动
10-16
主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
nongcunqq的博客
09-21 1001
两种方式 1. <el-menu :default-active="$route.path"></el-menu> 2.（1）、 设置属性 :default-active=“activeIndex” （2）、watch方法检测路由变化 （3）、created生命周期设置路由 <template> <div id="app"> <el-menu :default-active="activeIndex" backgro
vue使用this.$route获取路由信息
晚风的博客
12-21 3995
一、this.$route this.$route.path为页面的路由路径 二、location loaction.pathname 和this.$route.path效果相同
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3013
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
vue Element动态设置el-menu导航当前选中项
weixin_34082854的博客
01-17 2086
1,npm install vuex --save 2,在src下新建vuex文件夹，新建store.js文件； store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 0, adminleftnavnum:"/" //管理后台左...
element 菜单替换选中下划线样式和隐藏下划线
wwwer52022222的博客
08-14 1万+
<el-menu :default-active="activeIndex" class="el-menu-demo" text-color='#222222' close="" active-text-color='#1f84e0' mode="horizontal" @select="handleSelect"> <el-menu-item c...
导航栏标签下划线的切换，默认选中第一个，点击的时候切换。
qq_42143163的博客
08-02 5037
使导航栏中 第一个标签 默认有下划线，当鼠标划过别的导航的时候，下划线会换到别的导航下，当鼠标点击后，只有点击的那个标签有下划线，直到点击下一次的时候，下划线换到下一个被点击的标签. <!DOCTYPE html> <html lang="zh"> <head> <...
element导航栏修改悬停及选中样式
热门推荐
weixin_48111439的博客
11-27 1万+
Element -导航栏修改悬停及选中样式 element导航栏修改悬停及选中样式 **修改导航栏样式时el-menu-item和el-submenu有区别 el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用 原效果 el-menu-item部分 <style lang="less" scoped> .el-menu-demo { height: 92px; font-weight: bold; } //设置了行高和字体大小、高
router路由、二级路由、默认路由路径、查询参数、传参
12-17 3453
$route:路由信息对象，只读对象； $router:路由操作对象 ，只写对象。 完整路径：window.location.href 路由路径：this.$route.path 默认路由方法1： 使用redirect 重定向默认路由。默认跳转到子路由 “/left/tab1” export default new Router({ routes: [{ path: "/", redirect: "/left" }, { path: "/left", component:
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题
sumimg的博客
09-10 1万+
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题 情况一：单个菜单页面刷新导航失去高亮；（如下图这种菜单类型） 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值，解决这个只用取出当前页的路由然后赋值给activeIndex即可，代码如下： <el-menu :default-active="activeIndex" mode="horizonta
如何禁止elementui导航栏菜单路由跳转
05-26
如果你使用的是vue-router来进行导航栏菜单的路由跳转，可以在`<el-menu>`元素中设置`:router="false"`，这样就可以禁止elementui导航栏菜单路由跳转了，示例如下： ```vue <template> <div> <el-menu :default-active="$route.path" mode="horizontal" :router="false"> <el-menu-item index="/">首页</el-menu-item> <el-menu-item index="/about">关于我们</el-menu-item> <el-menu-item index="/contact">联系我们</el-menu-item> </el-menu> <router-view></router-view> </div> </template> ``` 当然，如果你想要在某些情况下允许elementui导航栏菜单进行路由跳转，也可以通过动态绑定`:router`属性来实现，在需要禁止路由跳转的时候设置为false，需要允许路由跳转的时候设置为true。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值