diff --git a/nuxt.config.ts b/nuxt.config.ts index cc73e9c..046d3f0 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,6 +1,7 @@ // https://qiita.com/iwata@github/items/5bc61ea9ca1c692d0370 import { Configuration } from 'webpack' import { Context } from '@nuxt/vue-app' +import routers from './src/routers/' const pkg = require('./package') @@ -121,18 +122,11 @@ module.exports = { middleware: 'check-auth', extendRoutes(routes: any, resolve: any) { - // https://ja.nuxtjs.org/api/configuration-router/#extendroutes - routes.push({ - name: 'custom-path', - path: '/example/(c|d)-:a/(e|f)-:b/*', - component: resolve(__dirname, 'src/routed-pages/custom-path.vue') - }) - - routes.push({ - name: 'include', - path: '/include', - component: resolve(__dirname, 'src/include/include.vue') - }) + if (routers && routers.length > 0) { + for (let i = 0, len = routers.length; i < len; i++) { + routers[i](routes, resolve) + } + } } }, styleResources: { diff --git a/src/routed-pages/README.md b/src/routed-pages/README.md index f3a7de9..78a71a8 100644 --- a/src/routed-pages/README.md +++ b/src/routed-pages/README.md @@ -1,11 +1,7 @@ # ROUTED_PAGES -This directory contains your Application Views and Routes. -The framework reads all the `*.vue` files inside this directory and creates the router of your application. +nuxt.config.ts の `router.extendRoutes` でカスタムルーティングしたいが、 pages にファイルを配置すると `.vue` ファイルの名前でアクセスできてしまう。 -More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). +それを防ぐのが、 `routed-pages` と `routers` です。 -router の extendRoutes でルーティングをカスタムすると `*.vue` ファイルは直接見られたくないけど、 -ルーティングのときには表示したいページがある。 - -それを routed-pages に置くことで、 pages のようにファイルを置くと見られるということがなくなる。 +routers でカスタムルーティングを定義し、 routed-pages のファイルを指定するのが pages を使わない場合のルールです。 diff --git a/src/routers/README.md b/src/routers/README.md new file mode 100644 index 0000000..b2cf9f1 --- /dev/null +++ b/src/routers/README.md @@ -0,0 +1,7 @@ +# ROUTERS + +nuxt.config.ts の `router.extendRoutes` でカスタムルーティングしたいが、 pages にファイルを配置すると `.vue` ファイルの名前でアクセスできてしまう。 + +それを防ぐのが、 `routed-pages` と `routers` です。 + +routers でカスタムルーティングを定義し、 routed-pages のファイルを指定するのが pages を使わない場合のルールです。 diff --git a/src/routers/custom-path.ts b/src/routers/custom-path.ts new file mode 100644 index 0000000..b8b4756 --- /dev/null +++ b/src/routers/custom-path.ts @@ -0,0 +1,8 @@ +export default function(routes: any, resolve: any): void { + // https://ja.nuxtjs.org/api/configuration-router/#extendroutes + routes.push({ + name: 'custom-path', + path: '/example/(c|d)-:a/(e|f)-:b/*', + component: resolve(__dirname, '../../src/routed-pages/custom-path.vue') + }) +} diff --git a/src/routers/include.ts b/src/routers/include.ts new file mode 100644 index 0000000..b66ef3e --- /dev/null +++ b/src/routers/include.ts @@ -0,0 +1,7 @@ +export default function(routes: any, resolve: any): void { + routes.push({ + name: 'include', + path: '/include', + component: resolve(__dirname, '../../src/include/include.vue') + }) +} diff --git a/src/routers/index.ts b/src/routers/index.ts new file mode 100644 index 0000000..af131a1 --- /dev/null +++ b/src/routers/index.ts @@ -0,0 +1,4 @@ +import customPath from './custom-path' +import include from './include' + +export default [customPath, include]