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>
@Khoulaiz
Copy link

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).

@emahuni
Copy link

emahuni commented Jul 5, 2017

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

@bezany
Copy link

bezany commented Jul 12, 2018

I found another solution for simple cases.

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

@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