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

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

   “vue.js:597 [Vue warn]: Unknown custom element: <router-link> - 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

<template>
  <div class="app-container">
   <mt-header fixed title="固定在顶部"></mt-header>

    <router-view></router-view>

   <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/member">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcar">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>
  </div>
</template>

<script>

</script>

<style scoped>
.app-container{
    padding-top: 40px;
}
</style>