Vue -- 后台系统布局导航栏

<template>

  <div class="home">

    <div class="head">

      <span>vue-demo</span>

      <Menu class="menu" mode="horizontal" :theme="theme1" 

      :active-name="$route.path" @on-select="onSelect">

        <MenuItem name="/Chart" :class="$route.path == '/Chart'?'on':''">统计图</MenuItem>

        <MenuItem name="/File" :class="$route.path == '/File'?'on':''">数据</MenuItem>

        <MenuItem name="/Download" :class="$route.path == '/Download'?'on':''">视频</MenuItem>

        <Submenu  name="/Other">

          <template slot="title">

              其他

          </template>

          <MenuItem name="/o1">邮件</MenuItem>

          <MenuItem name="/o2">依赖</MenuItem>

          <MenuItem name="/o3">源码</MenuItem>

        </Submenu>

     </Menu>

    </div>

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  data(){

    return{

      theme1: 'dark',

    }

  },

  methods:{

    //  导航切换

    onSelect(name){

      this.$router.push(name)

    }

  }

};

</script>

<style scoped>

.head{ 100%;height: 50px;background: #293c55;display: flex;}

.head span{margin-left: 25px;;color:#fff;line-height: 50px;}

.menu{height: 50px;margin-left: 50px;background: #293c55;line-height: 48px;}

.on{border-bottom: 2px solid #2db7f5;color:#2db7f5!important;}

</style>