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"
 
 
----------------------------------------------------------------------------------加强版-----------------------------------------------------------------------------------------------
也是根据路由选择左侧导航栏,但是路由可能有不固定的参数,那就根据固定的参数来判断选择哪一项:
html: 
  <el-menu :default-active="activedMenu" class="left-nav" :collapse="isCollapse">
<el-menu-item index="project" @click="changeRoute('/project/list')">
<i class="iconfont icon-icproject"></i>
<span slot="title">项目管理</span>
</el-menu-item>
<el-submenu index="operation">
<template slot="title">
<i class="iconfont icon-icoperation"></i>
<span slot="title">运营管理</span>
</template>
<el-menu-item index="operation/test" @click="changeRoute('/operation/test')">
<i class="fa fa-list-alt"></i>考试题
</el-menu-item>
</el-submenu>
</el-menu>

ts:

  get activedMenu() {
if (this.$route.path.indexOf('/project') == 0) {
return 'project'
} else if (this.$route.path.indexOf('/operation/test') == 0) {
return 'operation/test'
}
}

此时如果路径为:/project/12/···就可以根据开头“/project”定位到相应的左侧栏

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

  1. element-ui使用导航栏跳转路由用法

    element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...

  2. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...

  3. JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  4. vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  5. 【WPF】ListBox使用DataTemplate 以及默认选中第一项Item

    ListBox中DataTemplate的用法如下 . <ListBox x:Name="areaLB" ItemsSource="{Binding AreaNum ...

  6. Easyui combobox如何默认选中第一项???

    以下代码可以实现combobox默认选中第一项,在实际开发中我们可能会用到! // 处理combobox默认选中的问题 <input id="user_type" class ...

  7. elementui更改导航栏样式

    本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写 以下效果: 放上代码 <style> .el-menu-demo{ hei ...

  8. 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解

    在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...

  9. jsp 页面通过jq处理默认 选中的项 数据是通过遍历显示

    jsp页面循环显示里面是<a></a>或者<input>  id 以什么开头的id,然后当你点击那个的时候就在那个上面添加样式 <div> <di ...

随机推荐

  1. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  2. 【SHOI2015】脑洞治疗仪(恶心的线段树,区间最大子段和)

    题目描述: 曾经发明了自动刷题机的发明家 SHTSC 又公开了他的新发明:脑洞治疗仪——一种可以治疗他因为发明而日益增大的脑洞的神秘装置. 为了简单起见,我们将大脑视作一个 01 序列.11代表这个位 ...

  3. Markdown基本使用

    最近在写毕业论文,打算列个提纲,觉得有条理的搜集资料规划布局很重要,用Markdown写即有利于增强我的编写接口文档能力,也便于查看. markdown编写软件很多,markdownpad不错(mar ...

  4. CacheCloud+Redis Cluster 3部署

    CacheCloud环境需求 Java 7 Maven 3 MySQL Redis 3 具体用法可参考:https://cachecloud.github.io 1.下载CacheCloud 官网ht ...

  5. 配置Struts2及Struts2访问servlet api的方式

    Struts2的起源与背景 在很长的一段时间内,在所有的MVC框架中,Struts1处于绝对的统治地位,无论是从市场的普及范围,还是具体的使用者数量. 其他MVC框架都无 法与其相比,作为一一款优秀的 ...

  6. Redis学习推荐

    Redis快速入门 https://www.yiibai.com/redis/redis_quick_guide.html Redis用途和使用场景 https://blog.csdn.net/wei ...

  7. MetInfo最新网站漏洞如何修复以及网站安全防护

    metinfo漏洞于2018年10月20号被爆出存在sql注入漏洞,可以直接拿到网站管理员的权限,网站漏洞影响范围较广,包括目前最新的metinfo版本都会受到该漏洞的攻击,该metinfo漏洞产生的 ...

  8. ansible自动化运维入门

    1.ansible的安装 1)使用源码安装Python3.5 安装支持包 yum -y install lrzsz vim net-tools gcc gcc-c++ ncurses ncurses- ...

  9. 当安装mongodb客户端出现了Failed to load list of databases

    在装mongodb最新版(4.1.5开发版)服务后,我用robo3t打开它的时候遇到了这个问题. 最直接的解决办法就是换一个mongodb版本,https://github.com/Studio3T/ ...

  10. [BZOJ2809][Apio2012]dispatching(左偏树)

    首先对于一个节点以及它的子树,它的最优方案显然是子树下选最小的几个 用左偏树维护出每棵子树最优方案的节点,记录答案 然后它的这棵树可以向上转移给父节点,将所有子节点的左偏树合并再维护就是父节点的最优方 ...