Vue.jsからの以降でファイル名を変えたくない!
MetaフィールドなどAlias設定したい!
様々な理由でvue-routerの自動生成を使わずに手動設定する方法
どうすればいいか
・pages ディレクトリ外に Vue ファイルを置く
・extendRoutesでルーティング設定する
pages ディレクトリ外に Vue ファイルを置く
pages ディレクトリ内の Vue ファイルから自動生成されるので
単純にpages ディレクトリ以外のディレクトリに Vue ファイルを置けば自動生成されないのでviewsディレクトリなど適当なフォルダを作成して、そこに置く。
※pages自体を消してしまうとビルドエラーになる為、空のまま残しておく
extendRoutesでルーティング設定する
nuxt.config.js ファイルのrouterプロパティのextendRoutesでルーティングの拡張を行う
設定例
nuxt.config.js
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'index',
path: '/',
component: resolve(__dirname, 'views/index.vue')
},
{
name: 'user',
path: '/user',
component: resolve(__dirname, 'views/user/index.vue')
},
{
name: 'user-one',
path: '/user/one',
component: resolve(__dirname, 'views/user/one.vue')
})
}
}