element el-submenu實現網頁局部跳轉

<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">//這里el-menu定義了當前的導航菜單及屬性
      <el-submenu index="1">//el-submenu定義了子菜單欄
        <template slot="title"><i class="el-icon-message"></i>導航一</template>
        <el-menu-item-group>//el-menu-item-group定義了菜單分組(不寫也可)
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項1</el-menu-item>//el-menu-item為具體的菜單項
          <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>

菜單欄的定義

這里el-menu定義了當前的導航菜單及屬性，el-submenu定義了子菜單欄，el-menu-item-group定義了菜單分組，el-menu-item為具體的菜單項，組件從上到下分別是：el-menu, el-submenu, el-menu-item-group, el-menu-item。template為菜單欄的信息

屬性

在<el-menu>中需要--:default-active="this.$route.path"。用來綁定路由表

default-active:當前激活菜單的 index，至當前點擊的路由地址，這個是動態的，所以寫的時候需要可動態獲取

在<el-menu>中需要--router------或者router=true

每個el-menu-item的index是跳轉的路徑，可以理解為配置路由中的path

例如

<el-menu router :default-active="this.$router.path">
        <div>
          <h1 style="color: #E8E8E8; margin-bottom: 10px;"><i class="el-icon-office-building"></i>后台管理系統</h1>
        </div>
        <!-- el-submenu定義了子菜單欄 -->
        <el-submenu index="1">
          <!-- 子菜單欄信息 -->
          <template slot="title"><i class="el-icon-user-solid"></i>用戶分析</template>
          <!-- el-menu-item為具體的菜單項 -->
          <el-menu-item index="/home/FromData">數據統計</el-menu-item><!-- 每個el-menu-item的index是跳轉的路徑，可以理解為配置路由中的path，這里轉跳FromData -->
          <el-menu-item index="1-2">用戶管理</el-menu-item>
        </el-submenu>
 </el-menu>

實現轉跳需要配置路由

配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home/home.vue'
import FromData from '../views/from/data.vue'
Vue.use(Router)

export default new Router({
  mode: 'history', //去掉url中的#
  routes: [
    {
//配置了home
      path: '/home',
      name: 'Home',
      component: Home,
//在home中繼續跳轉FromData
      children: [{
        name: "FromData",
        path: "FromData",
        component: FromData
      }]
    }
  ]
})

在home頁面中局部跳轉需要<router-view>

<template>
  <el-container style="height:730px; min-height:762px; border: 1px solid #eee">
    <!-- 多級菜單 -->
    <el-aside width="200px" style="background-color: rgb(219, 69, 32); height:762px;">
      <!-- 這里el-menu定義了當前的導航菜單及屬性 -->
      <el-menu router :default-active="this.$router.path">
        <div>
          <h1 style="color: #E8E8E8; margin-bottom: 10px;"><i class="el-icon-office-building"></i>后台管理系統</h1>
        </div>
        <!-- el-submenu定義了子菜單欄 -->
        <el-submenu index="1">
          <!-- 子菜單欄信息 -->
          <template slot="title"><i class="el-icon-user-solid"></i>用戶分析</template>
          <!-- el-menu-item為具體的菜單項 -->
          <el-menu-item index="/home/FromData">數據統計</el-menu-item><!-- 每個el-menu-item的index是跳轉的路徑，可以理解為配置路由中的path -->
          <el-menu-item index="1-2">用戶管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>功能</template>
          <el-menu-item index="2-1">選項1</el-menu-item>
          <el-menu-item index="2-2">選項2</el-menu-item>
          <el-menu-item index="2-3">選項3</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>設置</template>
          <el-menu-item index="3-1">選項1</el-menu-item>
          <el-menu-item index="3-2">選項2</el-menu-item>
          <el-menu-item index="3-3">選項3</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 頭像 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <div class="demo-type" style="padding-top: 8px;">
            <div>
              <el-avatar src="https://i.gtimg.cn/club/item/face/img/2/15922_100.gif"></el-avatar>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span>admin</span></el-dropdown-item>
            <el-dropdown-item>個人信息</el-dropdown-item>
            <el-dropdown-item><span @click="tuicu()">退出登錄</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <router-view></router-view> //在這里進行局部跳轉
    </el-container>
  </el-container>

跳轉前

 

 跳轉后