Laravel Vuejs [Vue警告]：未知的自定义元素： <router-link>

Question

我正在尝试使用身份验证来制作这个crud应用程序。 但我遇到了这个错误：

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

found in

---> <Navbar> at resources/js/components/Navbar.vue
       <Root>

我已经通过npm安装了vue路由器并在我的app.js中导入了vue-router

app.js：

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)



 Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);


const app = new Vue({
    el: '#app',
});

Navbar.vue：

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
                <li class="form-inline" v-if="!loggedIn"><router-link :to="{ name: 'login' }" style="color: #fafafa;"> Login </router-link></li>
                <li v-if="!loggedIn"><router-link :to="{ name: 'register' }" style="color: #fafafa;"> Register </router-link></li>
                <li v-if="loggedIn"><router-link :to="{ name: 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
            </ul>
        </form>
        <!-- Login  -->
        </div>
    </nav>
  </div>
</template>

谢谢，欢呼！

Answer 1

尝试将name属性括在引号中。 请尝试以下代码：

  change :to="{ name: 'register' }" To :to="{ 'name': 'register' }"