Element-ui 中的 下拉選單 和 下拉選單

<div class="header">
      <div class="logo">
        <img src="../../../assets/layout/logo.png" alt="">
      </div>
      <!--
          判斷 fullPath 中是否包含某個引數，來決定是否加上某個類名
          究竟什麼樣的是二級選單？
          el-menu -> el-submenu -> el-menu-item
          整體        標題          具體選單
          如下的是一級選單：
          el-menu -> el-menu-item
          程式碼中的 activeTitle 用的還是很好的
          el-dropdown 下面的第一個標籤才會觸發，所以用 div 標籤包起來了
       -->
      <div class="nav">
        <el-menu class="el-menu-demo navBar" :class="$route.fullPath.includes('/home') ? 'home' : 'other'" mode="horizontal" router>
          <el-menu-item v-for="(item, index) in menuList" :title="item.name" :key="index" :index="item.path">
            <div :title="item.name" :class="{activeTitle: activePath === item.path}" ref="title">{{ item.name }}</div>
          </el-menu-item>
        </el-menu>
        <el-dropdown @command="handleCommand" v-if="isLogin">
          <div>
            <img src="@/assets/layout/avatar.png" width="40" alt="">
            <span class="username">{{userData.nickname}}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">修改密碼</el-dropdown-item>
            <el-dropdown-item :command="2">退出登入</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="login-text" @click="loginDialogVisible = true" v-else>登入</div>
      </div>
    </div>
 

記筆記是個好習慣，沒有人能記一輩子

多年以後想用了，還能看

把專案分成碎片化的功能點這樣好查詢一點，為了看某個小功能而去看整個專案就有點捨本逐末了