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

尝试用引号将名称属性括起来。试试下面的代码：

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