Vue utilise un élément pour implémenter l'analyse de navigation

Cet article présente principalement l'analyse de l'utilisation d'un élément pour implémenter la navigation dans Vue. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

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

Utiliser l'élément dans. vue pour l'implémenter. La navigation doit prêter attention à trois aspects

1. Activer vue-router

Ajouter un routeur dans el-menu

2. le menu correspondant est mis en surbrillance

Changement : default-active="$route.path"

3 Ajouter chaque itinéraire

L'itinéraire écrit directement dans l'attribut index en el. -menu-item

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème de la mise en cache de fermeture de méthode dans les méthodes dans vue

Eventbus dans Vue Analysis

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!