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

最新推荐文章于 2025-06-17 19:00:00 发布

原创最新推荐文章于 2025-06-17 19:00:00 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了如何在Vue应用中使用el-menu组件配合router实现导航功能，包括默认激活项设置和子菜单的层级结构。重点讲解了如何通过<el-menu-item>和<el-submenu>创建菜单及内部链接。同时提到了对应的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")
          },
        ]
      }
    ]
  }