在配合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中增加

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>