使用vue.js路由踩到的一个坑Unknown custom element

在配合require.js使用vue路由的时候，遇到了路由组件报错：

   “vue.js:597 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.”

      vue.js的功能是好的，vue-route.js没有起作用，这是怎么回事？明明文件也被加载进来了呀。

如果做如下修改就可以了，在router.js中增加

Vue.use(VueRouter) 就可以避免报这个错误

import Vue from 'vue'
import VueRouter from 'vue-router'

import HomeContainer from './components/lib/HomeContainer.vue'
import MemberContainer from './components/lib/MemberContainer.vue'
import ShopcarContainer from './components/lib/ShopcarContainer.vue'
import SearchContainer from './components/lib/SearchContainer.vue'

Vue.use(VueRouter)

var router = new VueRouter({
    routes:[
        {path:'/home', component: HomeContainer},
        {path:'/member', component: MemberContainer},
        {path:'/shopcar', component: ShopcarContainer},
        {path:'/search', component: SearchContainer}
    ],
    linkActiveClass:'mui-active'
})

export default router

 

不过这不是和main.js中加载重复了嘛？不知道是架构问题还是工具问题。目前暂时是这个解决方案：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import './lib/css/mui.min.css'
import './lib/css/icons-extra.css'
import 'mint-ui/lib/style.css'
import { Header } from 'mint-ui';

import router from './router'

Vue.config.productionTip = false
 


Vue.component(Header.name, Header);

/* eslint-disable no-new */
new Vue({
  render: h => h(App),
  router
}).$mount('#app');

其中APP.vue