el-menu菜单进行路由跳转

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