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

最新推荐文章于 2025-10-28 09:54:18 发布

原创最新推荐文章于 2025-10-28 09:54:18 发布 · 8.4w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #路由 #报错 #前端

vue.js 专栏收录该内容

2 篇文章

订阅专栏

本文解决了一个关于Vue路由组件在require.js环境下无法正确显示的问题。原因是未手动调用Vue.use(VueRouter)来注册路由插件。在AMD环境中，由于Vue对象不会暴露到全局window中，因此需要显式注册。

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


});