Element: 导航菜单中的default-active属性如何改为动态的？

Created on 10 Oct 2016 · 13Comments · Source: ElemeFE/element

<template>
  <div id="left">
    <div class="left-headers">
      DarKer
    </div>
    <div class="left-menu">
      <el-menu mode="vertical" theme="dark" default-active="/" :router="true">
        <router-link to="/">
          <el-menu-item select="/" index="/"><i class="el-icon-message"></i>仪表盘</el-menu-item>
        </router-link>
        <el-submenu index="5">
          <template slot="title">用户管理</template>

          <el-menu-item-group title="个人设置">
            <el-menu-item index="/users/your-profile">个人资料</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group title="所有用户">
            <el-menu-item index="/users/list">用户列表</el-menu-item>
          </el-menu-item-group>

        </el-submenu>
        <router-link to="/messages">
          <el-menu-item index="/messages"><i class="el-icon-message"></i>消息</el-menu-item>
        </router-link>
      </el-menu>
    </div>
  </div>
</template>
<script>
  export default {

  }
</script>
<style>
  #left {
    background-color: #324057;
    width: 13%;
    height: 100%;
    position: fixed;
  }

  .left-headers {
    background-color: #7586a0;
    height: 60px;
  }
</style>

现在需要把default-active=这个静态的参数改为动态的传参，每次其他页面调用的时候都把URL传过来，要不然访问任何链接都会跳转到"/"

Source

anshengme

Most helpful comment

搭配 vue-router 的话，我的做法是

<el-menu :default-active="$route.path"></el-menu>

QingWei-Li on 11 Oct 2016

👍14 😄3

All 13 comments

绑定可以使用

v-bind:default-active="CurrentPath"

每次给组件传入的参数是

<LeftMenu CurrentPath="/home"></LeftMenu>

那么这个CurrentPath怎样传入到导航这个组件中呢？

anshengme on 10 Oct 2016

mark
俺也有这个需求O(∩_∩)O~~

saint3347 on 11 Oct 2016

搭配 vue-router 的话，我的做法是

<el-menu :default-active="$route.path"></el-menu>

QingWei-Li on 11 Oct 2016

👍14 😄3

如果menu本身就用了router呢

saint3347 on 11 Oct 2016

@QingWei-Li 完美解决

anshengme on 11 Oct 2016

👍2

我这里在有el-submenu的情况下,使用

<el-menu :default-active="$route.path"></el-menu>

子菜单的父菜单还是不行

wennercn on 20 Oct 2016

👍2

@我的menu-item 是动态生成的这样没办法 @saint3347

sailsgo on 25 Jul 2017

👍2 ❤1

用了一相对比较sb的办法

Vue.prototype.$bus = new Vue({
data: {
active_menu:'welcome',
time:0,
}

使用时:default-active="$bus.active_menu"

chenjink674 on 13 Oct 2017

flyflyhe on 20 Aug 2018

menu设 ref="menu"

调用 this.$nextTick(()=>{ this.$refs.menu.activeIndex= "indexLabel"});
完美解决

jianhaozh on 24 Jun 2019

👍7

:default-active="onRoutes"

computed: {
        onRoutes () {
            // console.log(this.$route.path)
            if (this.$route.path === '/history') {
                return '2'
            } else {
                return '1'
            }
        }
    },