Skip to content

Instantly share code, notes, and snippets.

@languanghao
Created December 22, 2016 06:56
Show Gist options
  • Save languanghao/5f74ca361f22192ba774941a69fd275b to your computer and use it in GitHub Desktop.
Save languanghao/5f74ca361f22192ba774941a69fd275b to your computer and use it in GitHub Desktop.
element ui menu with vue-router
<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>
@SantosJMM
Copy link

SantosJMM commented May 13, 2020

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>

@buzzingcookie
Copy link

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

@entioentio
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment