Nuxt.jsでTypeScript化したところ、nuxt.config.jsのextendRoutesでハマった。。。 redirectしたいだけなのに。。。いろいろ調べたので、その備忘録

まとめ

Nuxt.js v2.7.0以上を使おう
chunkNames: {}も設定しよう

TypeScriptでの設定

こんな感じにで設定すればOK！

const config: NuxtConfiguration = {
  router: {
    extendRoutes(routes: NuxtRoutConfig[], resolve) {
      routes.push({
        path: "/_user/:uid",
        redirect: "/user/:uid",
        chunkNames: {}
      });
    }
  },
}

v2.7.0で#5700の修正が入っているので、v2.7.0以上を使わないといけない。。

ここからは調べた流れ的なの

JavaScriptでの設定

JavaScriptの場合はこんな感じの設定。
/_user/:uidを/user/:uidにリダイレクトしたかった。。

module.exports = {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: "/_user/:uid",
        redirect: "/user/:uid",
      });
    }
  },
}

やってみると、こんな感じで怒られる。。(-_-;)

f:id:wannabe-jellyfish:20190711171209p:plain

`routes`の型定義を見てみる

routesの型はNuxtRoutConfig[]らしい。

packages/config/types/router.d.ts | Nuxt.js - GitHub

import { RouterOptions, RouteConfig } from 'vue-router'

export interface NuxtRouteConfig extends RouteConfig {
  chunkNames: { [key: string]: string }
}

export interface NuxtConfigurationRouter extends RouterOptions {
  routeNameSplitter?: string
  extendRoutes?(routes: NuxtRouteConfig[], resolve: (...pathSegments: string[]) => string): void
  linkPrefetchedClass?: string
  middleware?: string | string[]
  prefetchLinks?: boolean
}