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>