NuxtのルーティングはVue Routerがベースとなっています。ドメインルートにアクセスした時に、表示されるページはどこで設定されているのかを確認してみます。同じ場所に、今後作成していくページのルーティング情報も記載されるようになります。
ルート設定はNuxtプロジェクトルートの「.nuxt」というディレクトリの中の、「router.js」で設定されています。
ソースを見てみましょう。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import Vue from 'vue' import Router from 'vue-router' import { interopDefault } from './utils' import scrollBehavior from './router.scrollBehavior.js' const _030a40d0 = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */)) // TODO: remove in Nuxt 3 const emptyFn = () => {} const originalPush = Router.prototype.push Router.prototype.push = function push (location, onComplete = emptyFn, onAbort) { return originalPush.call(this, location, onComplete, onAbort) } Vue.use(Router) export const routerOptions = { mode: 'history', base: decodeURI('/'), linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/", component: _030a40d0, name: "index" }], fallback: false } export function createRouter () { return new Router(routerOptions) } |
ソースの下の方に
routes[{}]という部分があります。ここでpath , component , name を指定しています。
ルーティングが自動設定される仕組みは、
|
0 1 2 |
$ npm run dev |
でコンパイルされると
「.nuxt」ディレクトリの「router.js」に自動にルーティング情報が設定される
