element ui menu with vue-router

left-bar.vue

<template>
    <el-menu :router="true" :default-active="activeLink">
        <template v-for="rule in $router.options.routes">
            <el-submenu v-if="rule.children && rule.children.length > 0"
                        :index="rule.path"
            >
                <template slot="title"><i :class="rule.icon"></i>{{ rule.title }}</template>
                <el-menu-item v-for="child in rule.children" :index="rule.path + '/' + child.path">{{ child.title }}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else
                          :index="rule.path"
            >
                <i :class="rule.icon"></i>
                {{ rule.title }}
            </el-menu-item>
        </template>
    </el-menu>
</template>
<style scoped lang='scss' rel="stylesheet/scss">

</style>
<script type='text/babel'>

    export default {
        mounted: function () {
            let match = _.chain(this.$route.matched).sortBy(n => n.path.length).last().value();
            this.activeLink = match.path;
        },
        data() {
            return {
                activeLink: null,
            };
        },
    };

</script>

Instead of using the vue mounted event, I would use these two special vue-router events like this:

    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.activeLink = to.path
      })
    },
    beforeRouteUpdate (to, from, next) {
      this.activeLink = to.path
      next()
    },

The advantage of this approach is, that the active link of the navbar is updated even when navigation is done by $router.push() (e.g. using a button outside the navbar).

Thanks for the headsup on how to use this with Element, someone needs to put this in the Element UI documentation (surprised to see beforeRouteUpdate too, need to read new features in recent ver).

However, I actually think all the script code is not necessary at all.

why not use $route.path or $route.params[segment]

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

for that simple example above that should work.

However, an app I am working on uses three dynamic route segments: /zone/:.../subzone/:.../workspace/:.../, with each loading a router-view.
So i had to do this to make that work:

for the zone:

...
<el-menu :router="true" :default-active="`/zone/${$route.params.zone}`">
...

for the subzone:

...
<el-menu :router="true" :default-active="`/subzone/${$route.params.subzone}`">
...

for the workspace:

...
<el-menu :router="true" :default-active="`/workspace/${$route.params.workspace}`">
...

This works without too much coding. It also has the advantages stated by @Khoulaiz

I found another solution for simple cases.

mounted () {
  this.activeLink = this.$route.path
},
watch: {
  $route (newVal, oldVal) {
    this.activeLink = newVal.path
  }
}

Hello v-for requires identifying the items, template does not accept: key therefore the: key must be assigned to each item.

<template>
    <el-menu router :default-active="$route.path">
        <template v-for="(rule, index) in $router.options.routes">
            <el-submenu v-if="rule.children && rule.children.length > 0"
                        :key="index"
                        :index="rule.path"
            ><template slot="title"><i :class="rule.icon"></i>{{ rule.name }}</template>
             <el-menu-item v-for="(child, index) in rule.children"
                           :key="index"
                           :index="rule.path + '/' + child.path"
             >{{ child.name }}
             </el-menu-item>
            </el-submenu>
            <el-menu-item v-else
                          :key="index"
                          :index="rule.path"
            ><i :class="rule.icon"></i>
             {{ rule.name }}
            </el-menu-item>
        </template>
    </el-menu>
</template>

In my opinion this is ridiculously poor implementation by the element-ui people, i mean look at that code needed for getting the current active route...and for that minimal design they give as navigation you could do this with the router-link much easier without the hassle of all this needles code, and of course the funny thing is that element-ui supposed to make this process easier, they have some great stuff but very poorly documented and the compatibility with other things is horrendous also, after seeing this and all the other problems that come with element-ui i stick to using their forms i think xD

Came here via google.
Well, I personally go with abusing relying on element's styles using its markup, since I don't really need anything fancy for this particular use.

This works like a charm:

<ul class="el-menu--horizontal el-menu">
	<router-link tag="li" class="el-menu-item" :to="{ name: 'home' }" active-class="is-active">Home</router-link>

...

.el-menu-item:not(.is-active) {
	border-bottom-color: transparent;
}

note: no updates, compatibility issues and a lot more sh*t going your way if you carelessly choose the path that I've chosen