menu

<template>
<el-row :gutter="10">

    <div>
        <el-row :gutter="10">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <h3>Luobov萝卜屋</h3>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">论坛</el-menu-item>
              <el-menu-item index="2">列表</el-menu-item>
              <el-menu-item index="3" >关于</el-menu-item>
              <el-menu-item index="4" style="margin-left: 150px">登录</el-menu-item>
              <el-menu-item index="5">注册</el-menu-item>
            </el-menu>
          </el-col>
      </el-row>
    </div>
  </el-row>

</template>
<style scoped>
    .el-menu--horizontal>.el-menu-item {
        margin: 0 1%;
        font-weight: 500;
          -moz-border-radius: 4px;
          -webkit-border-radius: 4px;
          color: #757575;
          font-size: 15px;
          font-family: -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif;
    }
    .el-menu--horizontal {
        border-right: none;
        border-bottom: 0px;
    }
    </style>
<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        msgcount:'',
        logined_prop:true
      };
    },
    mounted:function () {
          this.getLoginStatus();
          //setInterval(this.getUsrCurMsgCount,50000);
    },
    methods: {

      handleSelect(key, keyPath) {
        console.log(key, keyPath);

        if(key==1) this.$router.push({path: 'ArticleList'});
        if(key==2) this.$router.push({path: 'surveypage'});
        if(key==3) this.$router.push({path: 'about'});
        if(key==4) this.$router.push({path: 'login'});
        if(key==5) this.$router.push({path: 'signup'});

      }
    }
  }
</script>

http://luobov.cn/

菜单