未知定制元素:<router-link>在VueJS

Unknown custom element: <router-link> in VueJS

本文关键字：router-link VueJS 元素 未知      更新时间：2023-09-26

我尝试将导航逻辑提取到子组件中，其结构如下:

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

我试图在导航中使用属性。但是收到以下错误:

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-router 0.7.13

From vue-router docs: 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
})

我相信路由需要在创建router实例时被传递。我真的不知道你的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)，那么请忽略我上面的回答。
相关文章：