未知的自定义元素：VueJS 中的 <router-link>

Question

我尝试将我的导航逻辑提取到一个子组件中，结构如下：

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

我正在尝试使用 Navigation.vue 中的属性，但收到以下错误：

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

到目前为止，这是我的应用程序，非常简单。

ma​​in.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-router 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')

可能您的应用还没有路由器感知，正如上面的 cmets 所述（来自文档，而不是来自我！）。这可能是导致router-link 错误的原因。您可以尝试文档推荐的更简单的方法吗？

顺便问一下，你用的是哪个版本的 Vue 和 Vue-Router？如果不是当前版本（vue 2.0.3 和 vue-router 2.0.1），那么请忽略我上面的回答。