Vue verwendet Elemente, um die Navigationsanalyse zu implementieren

Dieser Artikel stellt hauptsächlich die Analyse der Verwendung von Elementen zur Realisierung der Navigation in Vue vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

<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>

Die Bedürfnisse der Verwendung von Elementen Um die Navigation in Vue zu realisieren, achten Sie auf drei Aspekte

1. Aktivieren Sie den Vue-Router

Fügen Sie einen Router im El-Menü hinzu

2 ist hervorgehoben

Änderung: default-active="$route.path"

3. Fügen Sie jede Route hinzu

Die Route wird direkt in das Indexattribut in el-menu geschrieben. Artikel

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem des Methodenabschluss-Cachings in Methoden in Vue

Eventbus in Vue Analysis

Das obige ist der detaillierte Inhalt vonVue verwendet Elemente, um die Navigationsanalyse zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!