Vue路由器加载子路由失败答案

【问题标题】：Vue router fails to load child routeVue路由器加载子路由失败
【发布时间】：2021-11-06 19:52:42
【问题描述】：

我正在尝试在我的 Vue 应用程序中设置路由器。在我开始尝试实施儿童路线之前，一切似乎都运行良好。现在，当我尝试访问子路由时，我收到一条错误消息以及一些警告： What happens when i click on 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' 的链接。

错误表明它“无法读取未定义的属性‘writeDebug’”，而 writeDebug 是组件上的一种方法，当我单击路由 (FullNoteSheet) 时它会尝试加载，因此我认为该组件有问题组件而不是路由器。但是，如果我尝试单独加载它，只需将它放在 App 组件模板中，组件就可以正常工作。

如果您处理过此类问题并知道解决方案，请告诉我。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你在noteListSheets 路由中有错字；应该是component: FullNoteSheet 而不是components: FullNoteSheet

【讨论】：