在配合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没有起作用,这是怎么回事?明明文件也被加载进来了呀。
//配置路由
define('route',['VueRouter','$a','$b'],function(VueRouter,$a,$b){
//配置路由地址
routes = [{
path:"/a",
component:$a
},{
path:"/b",
component:$b
},{
path:"/",
component:$a
}];
//创建路由实例,导入配置的路由地址
var router = new VueRouter({routes});
return router;
});
到网上查,到书上找,原来是没有手动调用Vue.use(VueRouter)。以前习惯了在文件头部直接引入vue.js和vue-router.js,这种方式下,在vue-router内部会检测window.Vue对象是否存在,如果存在就会自动调用Vue.use()方法,否则需要手动调用Vue.use(VueRouter)来确保路由插件注册到Vue中。在支持AMD环境中,Vue对象并不会暴露到全局window对象中,而是会通过define()形式输出和引入,因此需要手动注册。
//配置路由
define('route',['Vue','VueRouter','$a','$b'],function(Vue,VueRouter,$a,$b){
//模块化引入必须明确使用use方法!
Vue.use(VueRouter);
//配置路由地址
routes = [{
path:"/a",
component:$a
},{
path:"/b",
component:$b
},{
path:"/",
component:$a
}];
//创建路由实例,导入配置的路由地址
var router = new VueRouter({routes});
return router;
});