未知的自定義元素：在VueJS

Question

我試圖提取我的導航邏輯的子部件，其結構如下：

App.vue -- Header.vue --- Navigation.vue

我試圖使用Navigation.vue屬性但我recieving以下錯誤：

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

這是到目前爲止我的應用程序，非常簡單的基礎。

main.js

require('bootstrap-sass/assets/stylesheets/_bootstrap.scss') 
// require('bootstrap-sass/assets/javascripts/bootstrap.js') 
require('./assets/sass/app.scss') 

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import VueMoment from 'vue-moment' 
import VueResource from 'vue-resource' 

import { configRouter } from './routes' 

import App from './App' 

// Debug mode 
Vue.config.debug = true 

// Devtools enabled 
Vue.config.devtools = true 

// Silence logs and warnings 
Vue.config.silent = false 

// install router 
Vue.use(VueRouter) 

// install vue-moment filter 
Vue.use(VueMoment) 

// install resource 
Vue.use(VueResource) 

// create router 
var router = new VueRouter({ 
    history: true, 
    saveScrollPosition: true 
}) 

// configure router 
configRouter(router) 

/* eslint-disable no-new */ 
// new Vue({ 
//  el: 'body', 
//  components: { App, router } 
// }) 
router.start(App, '#app') 

App.vue

<template> 
    <div> 
     <site-header></site-header> 
     <router-view></router-view> 
    </div> 
</template> 

<script> 
    import SiteHeader from './components/Header' 

    export default { 
     components: { 
      SiteHeader 
     } 
    } 
</script> 

Header.vue

<template> 
    <header class="masthead container-fluid"> 
     <div class="row"> 

      <!-- Branding --> 
      <div class="col-md-3"> &nbsp; </div> 
      <!--/Branding --> 

      <!-- Primary Navigation --> 
      <navigation></navigation> 
      <!--/Primary Navigation --> 

      <!-- Actions --> 
      <div class="col-md-3"> &nbsp; </div> 
      <!--/Actions --> 

     </div> 
    </header> 
</template> 

<script> 
    import Navigation from './Navigation' 

    export default { 
     components: { 
      Navigation 
     }, 
     data() { 
      return { 
       msg: 'Hello World!' 
      } 
     } 
    } 
</script> 

Navigation.vue

<template> 
    <div class="col-md-6"> 
     <ul class="primary-navigation list-inline list-unstyled"> 
      <li> <router-link to="/about">About</router-link> </li> 
      <li> TEST </li> 
      <li> TEST </li> 
      <li> TEST </li> 
     </ul> 
    </div> 
</template> 
<script> 
    import VueRouter from 'vue-router' 

    export default { components: { VueRouter } } 

</script> 

我在做什麼錯？

版本：VUE 1.0.28 & VUE路由器0.7.13

Answer 1

從vue-router文檔：http://router.vuejs.org/en/essentials/getting-started.html

// 3. Create the router instance and pass the `routes` option 
// You can pass in additional options here, but let's 
// keep it simple for now. 
const router = new VueRouter({ 
    routes // short for routes: routes 
}) 

我相信路線需要時要創建的路由器實例來傳遞。我真的不知道你的configRouter(router)做什麼，但你可以保持簡單直到它開始工作。之後，您可以開始模塊化您的組件和配置。

此外，我不確定關於router.start，它不是在我能找到的文檔中的任何地方指定的。路由器文檔建議這個簡單的方法來創建你的應用程序的根實例：（！從文檔，而不是我）

// 4. Create and mount the root instance. 
// Make sure to inject the router with the router option to make the 
// whole app router-aware. 
const app = new Vue({ 
    router 
}).$mount('#app') 

可能是你的應用程序是不是路由器感知然而，在上述意見中提到。這可能是獲取router-link錯誤的原因。你能否按照文檔推薦的方法嘗試更簡單的方法？

順便說一句，您使用的是Vue和Vue-Router的版本？如果它不是當前版本（vue 2.0.3和vue-router 2.0.1），那麼請忽略我上面的答案。