时间戳

首页 > 解决方案 > Vue路由器加载子路由失败

javascript - Vue路由器加载子路由失败

问题描述

我正在尝试在我的 Vue 应用程序中设置路由器。在我开始尝试实施儿童路线之前，一切似乎都运行良好。现在，当我尝试访问子路由时，我收到一条错误消息以及一些警告： 当我单击子路由器链接时会发生什么

我的路由器设置：

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 组件模板中，组件就可以正常工作。

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

标签： javascriptvue.js

解决方案

noteListSheets您在路线上有错字；应该component: FullNoteSheet不是components: FullNoteSheet

推荐阅读