在配合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>