vue使用element實作導航的分析

這篇文章主要介紹了關於vue使用element實現導航的分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

<template>
  <p class="app">
    <el-header>
      <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
        <el-menu-item index="/Help">帮助</el-menu-item>
        <el-menu-item index="/Central-summary">中心概括</el-menu-item>
        <el-menu-item index="/Flying-Eagle-Academy">飞鹰学苑</el-menu-item>
        <el-menu-item index="/Strategy-comparison">策略对比</el-menu-item>
        <el-menu-item index="/Strategy-backtest">策略回测</el-menu-item>
        <el-menu-item index="/Combined-configuration">组合配置</el-menu-item>
      </el-menu>
      <p class="line"></p>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </p>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: "1"
      };
    }
  };
</script>

vue中使用element實現導航需要注意三個面向

1.啟用vue-router

在el-menu中加入router

2.刷新頁面後，對應menu高亮

更改:default-active="$route.path"

3.新增各路由

在el-menu-item中的index屬性直接書寫的路由

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決vue中methods中的方法閉包快取的問題

Vue中eventbus的解析

以上是vue使用element實作導航的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！