使用el-menu， vue-router进行路由跳转

html

<el-menu
    router
    @select="handleSelect"
    :default-active="this.$router.path"   
  >
    <el-menu-item index="/"> 首页 </el-menu-item>
    <el-submenu index="1">
         <template slot="title">页面导航</template>
         <el-submenu index="1-1">
	         <template slot="title">项目</template>
	         <el-menu-item index="/nav/project-info"> //跳转的路由地址
	         	项目管理
	        </el-menu-item>
        </el-submenu>
    </el-submenu>
</el-menu>

router文件

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home.vue";

import Nav from "./views/Nav.vue";
import Index from "./views/Index.vue";


// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/nav",
    name: "Nav",
    component: Nav,
    // redirect: {name: "Index"}, // 跳转到下一级第一个
    children: [
      {
        path: "index",
        name: "index",
        component: Index,
        children: [
          {
            path: "project-info",
            name: "ProjectInfo",
            component: () => import("../index/project-info/App.vue")
          },
        ]
      }
    ]
  }