Vue路由器加载子路由失败

Question

我试图在我的Vue应用程序中设置路由器。一切似乎都很好，直到我开始尝试实现子路由。现在，当我尝试访问子路由时，我得到一个错误消息以及一些警告:当我点击child router-link

会发生什么?我的路由器设置:

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', redirect: '/welcome' },
{
name: 'welcome',
path: '/welcome',
component: WelcomePage
},
{
name:'noteLists',
path: '/noteLists',
component: NoteListLinks,
children: [
{
name:'noteListSheets',
path: ':id',
components: FullNoteSheet
}
]
}
],
linkActiveClass: 'active'

});

所有其他路由链接正常。

使用和呈现子链接的组件模板如下:

<template>
<router-link 
:to="setNoteListLink(entry.id)"
:key=entry.id
v-for="entry in notesListEntry"
>
{{entry.name}}
</router-link>
<router-view></router-view>

setNoteListLink函数只创建一个类似'/noteList/1'的链接。

错误提示"无法读取undefined&quot的属性'writeDebug'"。和writeDebug是一个组件上的方法，当我点击路由(FullNoteSheet)时，它试图加载，所以我假设组件有问题，而不是路由器。但是如果我试着单独加载它，只需要把它放在App组件模板中就可以了。

如果你处理过这样的问题并知道解决方法，请告诉我。

Answer 1

您在noteListSheets路由中有一个错字;应该是component: FullNoteSheet而不是components: FullNoteSheet