如何在Nuxt 3中禁用默认路由并指定手动路由？

Question

首先，请不要浪费时间说服我使用 Nuxt 默认的基于目录的路由：我需要手动路由，仅此而已。

自 2022 年 5 月 30 日以来，@nuxtjs/router 的 “Vue router 4 支持”问题没有更新 - 看起来除了在需要时自己处理手动路由之外没有其他办法。

我已经检查了@nuxtjs/router的源代码 - 代码不多，但我不明白手动路由在哪里设置为Nuxt。

需要做2件事：

1. 禁用默认路由
2. 设置新路由

对于 Nuxt 2.X，禁用部分是

if (!options.parsePages) {
  this.nuxt.hook('build:before', () => {
    this.nuxt.options.build.createRoutes = () => {
      return []
    }
  })
}

在 Nuxt 3.X 的情况下，不再有

createRoutes

属性。

那么，我该如何指定新的路由呢？ 有专用属性吗？

我们可以从内联插件定义开始：

import { defineNuxtConfig, NuxtConfig } from "nuxt/config";


export default defineNuxtConfig({
  // ...
  modules: [
    async (inlineOptions: unknown, nuxt: NuxtConfig) => {

    }
  ]
});

顺便说一句，如果尝试使用当前的@nuxtjs/router用于Nuxt 3，将会是这个错误。

Answer 1

Nuxt3 中不再需要该模块。现在您可以在 router.options.ts

 文件夹中创建 

/app 并编辑或完全覆盖路线😋

Answer 2

在Nuxt3中，您可以使用RouterConfig来激活手动路由，请按照以下步骤操作：

1. 创建 ./app/router.options.ts 文件
2. 创建 ./pages/login.vue 文件进行测试
3. 在 ./app/router.options.ts 上插入此代码：

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

export default <RouterConfig>{
  routes: (_routes) => [
    {
      name: 'login',
      path: '/login',
      component: () => import('~/pages/login.vue'),
    }
  ],
}

现在您可以使用手动路由访问 http://localhost:3000/login。

Answer 3

像其他人提到的那样，您必须添加一个

app/router.options.ts

文件。

但是，还需要在

<router-view></router-view>

中添加

app.vue

，为匹配的路线提供渲染位置。

https://router.vuejs.org/guide/#HTML