使用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没有起作用,这是怎么回事?明明文件也被加载进来了呀。

//配置路由
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;


});

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值