nastiNte-Ui/src/views/navigation/navigation.vue

<template>
  <div style="width: 100%;height: 62px;display: flex;justify-content:space-around;box-shadow: 0 3px 7px 0 rgba(0,0,0,0.09);position:fixed;left: 0;background-color: #FFFFFF">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect">
      <img src="../../assets/logo.png" alt="" style="float: left;width: 15%;margin-top: 10px">
      <el-menu-item index="/">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我要下单</template>
        <el-menu-item index="2-1">合约下单</el-menu-item>
        <el-menu-item index="/inquiryAndOrder">查询下单</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">订单管理</template>
        <el-menu-item index="3-1">订仓须知</el-menu-item>
        <el-menu-item index="3-2">我的模板</el-menu-item>
        <el-menu-item index="/myorder">我的订单</el-menu-item>
        <el-menu-item index="3-4">申请放货</el-menu-item>
        <el-menu-item index="3-5">拆改单</el-menu-item>
        <el-menu-item index="3-6">在线换单</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">我要结算</template>
        <el-menu-item index="4-1">结算说明</el-menu-item>
        <el-menu-item index="4-2">生成账单</el-menu-item>
        <el-menu-item index="4-3">确认账单</el-menu-item>
        <el-menu-item index="4-4">申请发票</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">货物跟踪</template>
        <el-menu-item index="5-1">货运跟踪</el-menu-item>
        <el-menu-item index="5-2">签收单查询</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">客服中心</template>
        <el-menu-item index="6-1">办事处</el-menu-item>
        <el-menu-item index="6-2">客服 : 2880866298</el-menu-item>
        <el-menu-item index="6-2">客服 : 2880866300</el-menu-item>
        <el-menu-item index="6-2">客服 : 2885228653</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">用户中心</template>
        <el-menu-item index="7-1">个人信息</el-menu-item>
        <el-menu-item index="7-2">消息中心</el-menu-item>
        <el-menu-item index="7-3">开票信息</el-menu-item>
        <el-menu-item index="7-4">积分会员</el-menu-item>
        <el-menu-item index="7-5">账户余额</el-menu-item>
        <el-menu-item index="7-6">优惠券</el-menu-item>
        <el-menu-item index="7-7">帐号管理</el-menu-item>
      </el-submenu>
      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" @click="immediately" v-if="loginStatus === false">
        登录
      </div>
      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" v-else>
        <span>{{ username }}</span>
        丨
        <span>注销</span>
      </div>
    </el-menu>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'navigation',
  data() {
    return {
      activeIndex:'',
      loginStatus:false,
      username:''
    };
  },
  watch: {
    $route(e) {
      this.activeIndex = e.path;  // e里面的是当前路由的信息
      console.log(e.path);
    },
  },
  created() {
    this.activeIndex = this.$route.path
    if (Cookies.get('TokenKey')){
      this.loginStatus = true
      this.username = Cookies.get('username')
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      console.log(keyPath);
    },
    immediately(){
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>

</style>