Laravel Vuejs错误：未捕获引用错误：未定义登录

我正在尝试在一个CRUD应用程序中使用vue路由器，我在教程中遵循了这个应用程序。链接显示，但我收到以下错误： 未捕获引用错误：未定义登录

我已经在app.js中导入了vue路由器，并在routes.js文件中列出了路由。然而，错误仍然会突然出现。我搜索这个错误已经有一段时间了，但似乎找不到导致这个错误的原因

app.js：

require（'./bootstrap'）；
从“vue路由器”导入VueRouter
Vue.use（VueRouter）
组件（'navbar'，require（'./components/navbar.Vue'）。默认值）；
组件（'customers'，require（'./components/customers.Vue'）。默认值）；
组件（'login'，require（'./components/auth/login.Vue'）。默认值）；
常量路由器=新的VueRouter({
路线：[
{路径：'/login'，组件：login}，
{路径：'/register'，组件：register}
]
})
const app=新的Vue({
el:“#应用程序”，
路由器：路由器
})

routes.js：

从“./App”导入应用程序
从“./components/auth/Login”导入登录名
从“./components/auth/Logout”导入注销
从“./components/auth/Register”导入寄存器
导出常量路由=[
{
路径：'/customers'，
名称：'客户'，
组件：应用程序，
元：{
是的，
}
},
{
路径：'/login'，
名称：'登录'，
组件：登录，
元：{
客人是的，
}
},
{
路径：“/寄存器”，
名称：'注册'，
组成部分：寄存器，
元：{
客人是的，
}
},
{
路径：'/logout'，
名称：“注销”，
组件：注销
}
]
导出默认路由

---

谢谢

您似乎混淆了

app.js

文件中的一些代码

具体来说，你的问题就在这里

{path:'/login'，组件：login}，

您没有在任何地方定义

登录

符号。您还定义了一些全局组件，我不确定您是否希望这样做

我想你想要的是移除所有这些

Vue.component（'login'，require（'./components/auth/login.Vue'）。默认值）；
常量路由器=新的VueRouter({
路线：[
{路径：'/login'，组件：login}，
{路径：'/register'，组件：register}
]
})

并将其替换为

从“/routes”导入{routes}
const router=new VueRouter（{routes}）

---

我也有点怀疑你

require（'./bootstrap'）；

---

但是你还没有说什么是

引导

，所以我让你自己来弄清楚。

你似乎把

app.js

文件中的一些代码弄混了

import routes from './routes.js'
const router = new VueRouter({routes})

具体来说，你的问题就在这里

{path:'/login'，组件：login}，

您没有在任何地方定义

登录

符号。您还定义了一些全局组件，我不确定您是否希望这样做

我想你想要的是移除所有这些

Vue.component（'login'，require（'./components/auth/login.Vue'）。默认值）；
常量路由器=新的VueRouter({
路线：[
{路径：'/login'，组件：login}，
{路径：'/register'，组件：register}
]
})

并将其替换为

从“/routes”导入{routes}
const router=new VueRouter（{routes}）

---

我也有点怀疑你

require（'./bootstrap'）；

但是你还没有说什么是

引导

，所以我会让你自己去弄清楚

import routes from './routes.js'
const router = new VueRouter({routes})

你的实际错误。是的，您在routes.js文件中导入了登录名，但错误显示，app.js中没有定义登录名。您需要在每个文件中导入要在其中使用的内容

---

你的实际错误。是的，您在routes.js文件中导入了登录名，但错误显示，app.js中没有定义登录名。您需要在每个文件中导入要在其中使用的内容

与所有其他答案一样，这段代码有很多地方出错

首先，有一个routes.js文件，但它没有被使用

我已经创建了一个沙盒版本的代码，向您展示路由器/应用程序的工作版本

发生了什么变化

首先，您应该在routes.js中导出vue路由器的实例，而不仅仅是定义常量。这是Vue中推荐的路由方式

从“Vue”导入Vue；
从“vue路由器”导入路由器；
从“/App”导入应用程序；
从“/components/auth/Login”导入登录名；
从“/components/auth/Logout”导入注销；
从“/components/auth/Register”导入寄存器；
Vue.use（路由器）；
导出默认新路由器({
路线：[
{
路径：“/customers”，
名称：“客户”，
组件：应用程序，
元：{
真实的
}
},
{
路径：“/login”，
名称：“登录”，
组件：登录，
元：{
客人：是的
}
},
{
路径：“/寄存器”，
名称：“注册”，
组成部分：寄存器，
元：{
客人：是的
}
},
{
路径：“/logout”，
名称：“注销”，
组件：注销
}
]
});

其次，将该实例导入app.js并分配到Vue实例的router属性中

从“Vue”导入Vue；
从“vue路由器”导入VueRouter；
从“/routes”导入路由器；
Vue.use（VueRouter）；
const app=新的Vue({
el:“应用程序”，
路由器：路由器
});

---

在可能的情况下，将组件放在app.js之外。这允许您在router.js内按需加载资源等操作。

与所有其他答案一样，此代码有很多错误

首先，有一个routes.js文件，但它没有被使用

我已经创建了一个沙盒版本的代码，向您展示路由器/应用程序的工作版本

发生了什么变化

首先，您应该在routes.js中导出vue路由器的实例，而不仅仅是定义常量。这是Vue中推荐的路由方式