Vue는 요소를 사용하여 탐색 분석을 구현합니다.

이 글은 내비게이션을 구현하기 위해 요소를 사용한 Vue 분석을 주로 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

<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에서 탐색 구현

1. vue-router

활성화 el-menu

2. 페이지를 새로 고친 후 해당 메뉴를 강조 표시하세요

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

3. 각 경로 추가

el-menu-item의 index 속성에 직접 작성한 경로입니다. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

vue의 메서드에서 메서드 클로저 캐싱 문제를 해결하는 방법

Vue의 이벤트 버스 분석

위 내용은 Vue는 요소를 사용하여 탐색 분석을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!