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')}},
]
}
]
})