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

Posted 2023-03-10

【中文标题】Laravel Vuejs [Vue 警告]：未知的自定义元素：<router-link>

【英文标题】：Laravel Vuejs [Vue warn]: Unknown custom element: <router-link>

【发布时间】：2019-09-22 15:17:17

【问题描述】：

我正在尝试使用身份验证制作这个 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>

感谢和欢呼！

【问题讨论】：

您具体遇到了什么问题？

主要在前端。就像我的登录链接不会显示登录表单一样。

您没有提供任何前端代码，即 html 或 javascript。

对不起，伙计。我在上面发布了导航栏和登录vue。谢谢。

【参考方案1】：

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

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