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>

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