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

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

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

按照网上给的方式配置好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的合适位置加上 组件内容才会显示出来