el-menu菜单进行路由跳转

最新推荐文章于 2025-04-18 17:02:33 发布

youqitt

最新推荐文章于 2025-04-18 17:02:33 发布

阅读量3.1w

点赞数 12

分类专栏：前端知识文章标签： ElementUI

本文链接：https://blog.youkuaiyun.com/weixin_41195867/article/details/89349024

版权

前端知识专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue项目中使用element-ui的el-menu组件实现菜单项的路由跳转，包括设置default-active属性和使用router属性，以及如何在router.js中配置路由路径，实现懒加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-menu菜单进行路由跳转

el-menu 添加 :default-active=“this.$router.path” 和 router
(default-active前面要有 “:” )

<el-menu 
      :default-active="this.$router.path"            //路由跳转
      router>										//写上router
      <el-menu-item index="/main">		        //在需要跳转的index加 跳转的地址
          <img src="../imgs/icon_main.png"/>
          <span>首页</span>
      </el-menu-item>
      <el-submenu index="1">
          <template slot="title" class="title">
              <img src="../imgs/icon_man.png"/>
              <span>实习</span>
          </template>
          <el-menu-item index="/practiceInfo">			//跳转的地址
              <span class="item_title">实习信息</span>
          </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
          <template slot="title">
              <img src="../imgs/icon_man.png"/>
              <span>毕业设计</span>
          </template>
          <el-menu-item index="/myDesign">
              <span class="item_title">我的选题</span>
          </el-menu-item>
          <el-menu-item index="/allDesign">
              <span class="item_title">所有题目</span>
          </el-menu-item>
      </el-submenu>
      <el-menu-item index="/recruit">
          <img src="../imgs/icon_man.png"/>
          <span slot="title">查看招聘信息</span>
      </el-menu-item>
</el-menu>

当然，router.js文件下应该配置好路由路径。建议用路由懒加载方式

//import main from './pages/main.vue'


Vue.use(Router);

export default new Router({
    mode:'history',
    routes:[
        {path:'/',component:  resolve => require(['./pages/login.vue'], resolve)}, // 路由懒加载
        {path:'/login',component: resolve => require(['./pages/login.vue'], resolve)},
        {
            path:'/main',
            component:main,
            children:[
                {path:'', component: resolve => require(['./pages/news.vue'], resolve)},
                {path:'/news', component: resolve => require(['./pages/news.vue'], resolve)},
                {path:'/practiceInfo', component: resolve => require(['./pages/practiceInfo.vue'], resolve)},
                {path:'/myDesign', component: import(/* webpackChunkName: "testProject" */ './pages/myDesign.vue')}, // 路由懒加载 - 分模块
                {path:'/allDesign', component: import(/* webpackChunkName: "testProject" */ './pages/allDesign.vue')}},
                {path:'/recruit', component: import(/* webpackChunkName: "testProject" */ './pages/recruit.vue')}},
            ]
        }
    ]
})