element中navMenu结合路由使用

路由
使用NavMenu做为导航菜单，实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转，菜单导航页的路由要作为其它菜单页的父路由。

现有菜单导航页：home.vue，图表页：echart.vue。如菜单导航页的路由为/home，要想实现本页面路由跳转，则图表页的路由为/echart是不可以的，路由应为/index/echart，必须是菜单导航页的字路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Echart1 from '../views/echart/echart1.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    redirect: '/home/echart1',
    children: [
      {
        path: '/home/echart1',
        name: 'Echart1',
        component: Echart1
      },
    ]
  },
  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

组件的使用：

1. 一定要在 el-menu 上配置 router 属性，否则无法跳转。
2. el-menu-item 上route属性配置为跳转的路由。
3. el-main 中使用router-view来占位。

<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect">
          <el-menu-item route index="/home/echart1">处理中心</el-menu-item>
          <el-menu-item index="/home/2">工作台</el-menu-item>
          <el-menu-item index="/home/3">消息中心</el-menu-item>
          <el-menu-item index="/home/4">订单管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>