Vue uses element to implement navigation analysis

This article mainly introduces the analysis of using element to realize navigation in vue. It has certain reference value. Now I share it with you. Friends in need can refer to it.

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

The needs of using element to realize navigation in vue Pay attention to three aspects

1. Enable vue-router

Add router in el-menu

2. After refreshing the page, the corresponding menu is highlighted

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

3. Add each route

The route written directly in the index attribute in el-menu-item

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of method closure caching in methods in vue

Eventbus in Vue Analysis

The above is the detailed content of Vue uses element to implement navigation analysis. For more information, please follow other related articles on the PHP Chinese website!