“未知的自定义元素：<router-link>”升格为Vue公司2

问题描述：

从VUE 1和VUE路由器0.7升级的应用程序，并收到此错误控制台“未知的自定义元素：<router-link>”升格为Vue公司2

[Vue公司警告]：未知自定义元素： - 没有你正确注册组件？对于递归组件，确保提供“名称”选项。（在成分中发现... [到组件的路径称为]

import Vue from 'vue'; 
import VueResource from 'vue-resource'; 
import VueRouter from 'vue-router'; 
import gsap from 'gsap'; 

Vue.use(VueResource); 
Vue.use(VueRouter); 

window.flipster = require('jquery.flipster'); 
window.spritespin = require('SpriteSpin'); 

// Main Layout Components 
import Menu from './components/Menu.vue'; 
import Section from './components/Section.vue'; 

// Controller Layout Components 
import ControllerMenu from './components/Controller/Menu.vue'; 
import ControllerSection from './components/Controller/Section.vue'; 

// Generic Components 
import Tabs from './components/Tabs.vue'; 
Vue.component('tabs', Tabs); 

import Tab from './components/Tab.vue'; 
Vue.component('tab', Tab); 

import Chart from './components/Chart.vue'; 
Vue.component('chart', Chart); 

import ChartDev from './components/ChartDev.vue'; 

import Datastore from './DataStore'; 
Vue.use(Datastore); 

// controller check and other useful functionality 
import Helpers from './Helpers'; 
Vue.use(Helpers); 

import App from './App.vue'; 

window.eventHub = new Vue(); 

var router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
     { 
      path: '/', 
      name: 'menu', 
      component: ControllerMenu 
     }, 
     { 
      path: 'sections/:sectionId', 
      name: 'section', 
      component: ControllerSection 
     }, 
     { 
      path: 'chart/:datasetId', 
      name: 'chart', 
      component: ChartDev 
     } 
    ] 
}); 

new Vue({ 
    router: router, 
    render(createElement) { 
     return createElement(App) 
    } 
}).$mount('.container');

自己的工作，如果我使用地址栏定位到他们的路线，这是不是只是router-link分量的东西。？

任何想法

你是什么意思：router-link组件不是一件东西？ – Saurabh

答

您没有使用Vue.use初始化路由器你需要做到以下几点：

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter)

编号：https://router.vuejs.org/en/installation.html

编辑：后评论＃1和＃2的更多思考：

您安装使用.$mount('.container')的应用程序。虽然这可以按预期工作，但使用类选择器是有风险的。你确定你只有一个<div class="container">元素？你才能尝试以更简单的方式使用id选择在文档：

new Vue({ 
    el: "#app", 
    router: router, 
    render: h => h(App) 
})

虽然这已经无关router-link不可用，我怀疑有可能是Vue公司的多个实例，如果您有多个container元素。除上述之外，我找不到任何代码错误。

对不起，我没有留下那部分内容，因为它是样板文件。它就在那里，正如我所说的，路由器本身正在工作。我可以使用URL浏览并加载正确的组件。这只是当我尝试在我的模板中使用路由器视图组件时遇到问题。 –

'Vue.use'将插件的'install'方法调用为[文档中定义的]（https://vuejs.org/v2/api/#Vue-use）。在定义'router-view'后，vue-router的安装方法包含'Vue.component（'router-link'，Link）'行。所以，'router-link'应该被定义并且可用。如果在修改的问题中可以找到其他问题，我会回来。 – Mani

使用一个id选择器只是为了安全，但正如你所说，没有区别。感谢您的尝试，虽然 –

答

更新vue-router时可能出错了，您是否明确使用了正确的版本？尝试从项目根目录下运行npm list vue-router，它应该输出2.0.x的版本：

[email protected]

任何低于V2不会有路由器的链路，如果这种情况下尝试：

npm uninstall vue-router 
npm install vue-router --save-dev

如果版本是正确的，那么可能是值得简化项目来解决此。我做了一个小提琴：

https://jsfiddle.net/thebigsurf/ajpuw8hq/

如果您在HTML中复制& JS从这个基本建立了它能够解决问题？如果是这样的话，可能是你的其他Vue.use()插件配置中的一个破坏了vue-router。

我想你说得对。约翰森提到他最近升级到Vue2。所以他也需要升级vue-router。 – Mani

绝对使用vue-router 2.0.3。用'npm list'确认 –

好酷 - 我用一个简单的示例应用程序更新了答案，以帮助您解决此问题。 – GuyC

“未知的自定义元素：”升格为Vue公司2

相关推荐