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>

跳转前

 

 跳转后