vue.js - vue-router TypeError : "' set name' called on an object that does not implement interface HTMLFormElement.“

Question

我在使用 vue-router 时遇到了这个奇怪的问题，我无法调试它。

这是我的 routes.ts

import Navbar from '@/layout/Navbar.vue'
import SidebarMenu from '@/layout/SidebarMenu.vue'
import Footer from '@/layout/Footer.vue'

const LocaleComponent = {
    render(h: any) {
        return h('router-view')
    }
}

function castParam(route: any) {
    const props = { ...route.params }
    props.id = +props.id
    return props
}

export default [
    {
        name: 'Home',
        path: '/',
        components: { default: () => import('@/views/LandingPage.vue'), navbar: Navbar, footer: Footer }
    },
    // user routes
    {
        name: 'Profile',
        path: '/profile',
        components: { default: () => import('@/views/Profile.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },
    {
        name: 'BillingInfo',
        path: '/billing-info',
        components: { default: () => import('@/views/BillingInfo.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },
    // project settings
    {
        path: '/settings',
        components: { default: LocaleComponent, sidebar: SidebarMenu },
        children: [
            {
                name: 'WorkspaceNew',
                path: 'new',
                component: () => import('@/views/WorkspaceSettings.vue'),
                meta: { requiresAuth: true }
            },
            {
                name: 'WorkspaceEdit',
                path: ':workspaceName',
                component: () => import('@/views/WorkspaceSettings.vue'),
                meta: { requiresAuth: true },
                props: true
            }
        ]
    },
    // projects and tasks
    {
        name: 'AllWorkspaces',
        path: '/workspaces',
        components: { default: () => import('@/views/AllWorkspaces.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },    
    {
        path: '/workspace/:workspaceName',
        components: { default: LocaleComponent, sidebar: SidebarMenu },
        children: [
            {
                name: 'WorkspaceTasks',
                path: 'overview',
                component: () => import('@/views/WorkspaceTasks.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true },
                props: true
            },
            // single task
            {
                name: 'TaskNew',
                path: 'task/new',
                component: () => import('@/views/Task.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            },
            {
                name: 'TaskEdit',
                path: 'task/:id',
                component: () => import('@/views/Task.vue'),
                props: castParam,
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            },
            // Logs
            {
                name: 'Logs',
                path: 'logs',
                component: () => import('@/views/WorkspaceLogs.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            }
        ]
    },
    // catch all
    {
        path: '*',
        redirect: { name: 'AllWorkspaces' }
    }
]

当我从 /settings/:workspaceName 或 /settings/new 转到应用程序中的任何其他路径时，就会出现此问题。

我在控制台中收到此错误消息。我还注意到即使 View 实际上发生了变化，url 也不会更新，即使我与应用程序保持交互并导航到不同的路线，url 仍然是 http://localhost:8080/settings/:workspaceName

Answer 1

我遇到了完全相同的问题，对我来说原因似乎是这段代码:

{
  path: '/tags',
  name: 'tags',
  component: Tags,
  meta: { title: 'Tags' },
  beforeEnter: (to, from, next) => {
    if (authenticated) {
      next()
    } else {
      next({ name: 'home' }) // This line
    }
  }
},

我以错误的方式使用了 next() 函数。当我将该行更改为 next('/') 时，错误消失了。

我不确定这是否对您有帮助，但我还是想分享一下。