Skip to content

Instantly share code, notes, and snippets.

@languanghao

languanghao/left-bar.vue

Created December 22, 2016 06:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save languanghao/5f74ca361f22192ba774941a69fd275b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save languanghao/5f74ca361f22192ba774941a69fd275b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. languanghao created this gist Dec 22, 2016.
    36 changes: 36 additions & 0 deletions left-bar.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <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>