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>

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