el-menu+vue-router导航路由跳转

vue+elementui+vue-router使用el-menu实现导航路由跳转

推荐一篇比较详细解释vue+elementui+vue-router实现路由跳转的文章： .

按照网上给的方式配置好vue-router后却总是会报错：

element-ui.common.js:3383 TypeError: Cannot read property push of undefined

原因是：只在router.js中引入了vue-router和Vue.use(ElementUI);但是没有在main.js文件中引入了vue-router和Vue.use(ElementUI)

所以：

// main.js
import Vue from "vue/dist/vue"
import App from ./App.vue
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css

import VueRouter from vue-router
import router from ./router.js

Vue.use(VueRouter);

Vue.use(ElementUI);


var sfopenpc = new Vue({
	el: #app,
	router,
	render: h => h(App),
	
});

// router.js
import Vue from vue
import Router from vue-router

Vue.use(Router);
const routes=[
    {
        path:/infolife,
        component:resolve => require([./lifeCyleStudy/subInfoLifeStudy.vue],resolve)
    },
    {
        path:/bodylife,
        component: resolve => require([./lifeCyleStudy/subBodyLifeStudy.vue],resolve)
    }
    
];
export default new Router({
    mode:history,
	routes
});

最后！！！！记得在App.vue的合适位置加上 <router-view> </router-view> 组件内容才会显示出来