Nuxt3 自定义路由破坏了 vue-router 和 <nuxt-link> 实例

Question

我有一个 Nuxt3 应用程序，当前由基本上采用以下格式的页面组成：

pages/
|-- index.vue
|-- test-directory/
|   |-- [slug].vue
|   |-- test.vue
|   |-- index.vue

我需要 test.vue 文件优先于 slug 页面，所以我研究了 自定义路由。我创建了一个 app/router.options.ts 文件，如下所示：

import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig> {
  routes: _routes => [
    // home
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/index.vue').then(r => r.default || r),
    },

    {
      name: 'test-directory',
      path: '/test-directory',
      component: () => import('~/pages/test-directory/index.vue'),
    },
    {
      name: 'test-directory-test',
      path: '/test-directory/test',
      component: () => import('~/pages/test-directory/test.vue'),
    },
    {
      name: 'test-directory-slug',
      path: '/test-directory/:slug',
      component: () => import('~/pages/test-directory/[slug].vue'),
    },
  ],
};

保存文件并重新启动服务器后，所有页面都中断，我收到错误：

[Vue Router warn]: No match found for location with path "/@vite/client"

。浏览器控制台显示错误

[nuxt] error caught during app initialization Error: No match for {"name":"index","params":{}}

。看起来整个过程中使用的所有

<nuxt-link>

实例都已损坏并且不会渲染到 DOM。

设置自定义路由时我缺少什么吗？

编辑： 我尝试了另一种方法，使用 Nuxt.config 中的

pages:extend

钩子。

  hooks: {
    'pages:extend': (pages) => {
      pages.push({
        name: 'test-directory-test',
        path: '/test-directory/test',
        file: resolve(__dirname, 'pages/test-directory/test.vue'),
      });
    },
  },

这更接近，因为

<nuxt-link

元素渲染正确。但是，如果我单击该页面的链接，它会与 slug 文件匹配，并且如果我刷新页面，它会正确呈现 Test.vue 文件。不过，我不完全确定如何从这里修复它。

Answer 1

发现我使用的 nuxt-link 仍在将用户发送到指定的 slug 路由。最终创建了 app/router.options.ts 文件，然后更改这些 nuxt-link 属性，一切正常！