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{width: 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>