zoukankan      html  css  js  c++  java
  • elementUI的导航栏怎么根据路由默认选中相关项

    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”定位到相应的左侧栏

  • 相关阅读:
    设计模式——单例模式
    设计模式——工厂模式在开发中的应用(简单计算器)
    设计模式——简单工厂模式—工厂方法模式—抽象工厂模式(比较)
    设计模式——抽象工厂模式
    设计模式——工厂方法模式
    设计模式——简单工厂
    Win7使用初体验
    上传文件夹
    java上传文件夹到oss
    java+上传一个文件夹
  • 原文地址:https://www.cnblogs.com/XHappyness/p/7682944.html
Copyright © 2011-2022 走看看