未知自定义元素: VueJS中的<路由器-链接>
我尝试将我的导航逻辑提取到一个子组件中，其结构如下：
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.
到目前为止，这是我的应用程序，非常简单，一个基本的。
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"> </div>
<!-- / Branding -->
<!-- Primary Navigation -->
<navigation></navigation>
<!-- / Primary Navigation -->
<!-- Actions -->
<div class="col-md-3"> </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
回答 1
Stack Overflow用户
发布于 2016-10-25 15:10:51
来自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错误的一个原因。您能尝试一下docs推荐的更简单的方法吗？
顺便问一下，您使用的是哪个版本的Vue和Vue路由器？如果不是当前版本(vue 2.0.3和vue路由器2.0.1)，那么请忽略我上面的答案。
https://stackoverflow.com/questions/40243221
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号