「未知的自定義元素：<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分量的東西。？

任何想法

來源

2016-11-25 Johnathan Barrett

你是什麼意思：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元素。除上述之外，我找不到任何代碼錯誤。

來源

2016-11-25 11:02:12 Mani

對不起，我沒有留下那部分內容，因爲它是樣板文件。它就在那裏，正如我所說的，路由器本身正在工作。我可以使用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。

來源

2016-11-25 11:48:22 GuyC

我想你說得對。約翰森提到他最近升級到Vue2。所以他也需要升級vue-router。 – Mani

絕對使用vue-router 2.0.3。用'npm list'確認 –

好酷 - 我用一個簡單的示例應用程序更新了答案，以幫助您解決此問題。 – GuyC

「未知的自定義元素：<router-link>」升格爲Vue公司2

回答

相關問題