導航欄的具體引用這裡不在多說了，具體用法可以參考vue官網

先把可以實現跳轉的程式碼貼上，然後說幾個注意點

 <el-menu :default-active="this.$route.path" class="el-menu-vertical-demo left" router>
        <el-menu-item index="/index" >
          <template #title>
            <i class="el-icon-document-copy"></i>
            <
 
span class="m-text">資料彙總</span>
          </template>
        </el-menu-item>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-document-copy"></i>
            <span class="m-text">文章管理</span>
          </template
 
>
          <el-menu-item index="/index/listArticle"  style="padding-left: 5em">
            <i class="el-icon-tickets"></i>
            <span>文章列表</span>
          </el-menu-item>
          <el-menu-item index="/index/addArticle" style="padding-left: 5em" >
            <
 
i class="el-icon-edit-outline"></i>
            <span>新增文章</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <template #title>
            <i class="el-icon-document-copy"></i>
            <span class="m-text">標籤管理</span>
          </template>
        </el-menu-item>

      </el-menu>

注意點一：如果想要實現通過導航欄進行路由跳轉，需要將element-menu元件的router屬性設定為true

注意點二：element-menu-item的屬性index中的值是需要跳轉的路由的目標地址

注意點三：如果想實現路由跳轉之後對應的element-menu-item高亮，需要將default-active屬性設定為：this.$route.path