vue-element-template实战案例

vue-element-template实战（六）实现顶部⼀级菜单，左侧⼆级实战（六）实现顶部⼀级菜单，左侧⼆级

及⼆级以下菜单及⼆级以下菜单

总思路：

⼀、在layout⾥加了⼀个Topbar组件，地址为：src/layout/components/Topbar.vue

Topbar.vue代码如下：

<template>

<div class="top-nav">

<div class="log">⼀级导航</div>

<div v-for="item in routes" :key="item.path" class="nav-item">

<app-link :to="resolvePath(item)">

<el-menu-item

v-if="!item.hidden"

:index="item.path"

>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</el-menu-item>

</app-link>

</div>

</el-menu>

<div class="right-menu">

<router-link to="/">

<el-dropdown-item>Home</el-dropdown-item>

</router-link>

<a href="https://github.com/PanJiaChen/vue-admin-template/" target="_blank">

<el-dropdown-item>Github</el-dropdown-item>

</a>

<a href="https://panjiachen.github.io/vue-element-admin-site/#/" target="_blank">

<el-dropdown-item>Docs</el-dropdown-item>

</a>

<el-dropdown-item divided @click.native="logout">

</template>

<script>

import { mapGetters } from 'vuex'

import AppLink from './Sidebar/Link'

import { constantRoutes } from '@/router'

import variables from '@/styles/variables.scss'

import { isExternal } from '@/utils/validate'

export default {

name: 'Topbar',

components: {

},

computed: {

activeMenu() {

const route = this.$route

const { meta, path } = route

// if set path, the sidebar will highlight the path you set

if (meta.activeMenu) {

return meta.activeMenu

}