Posted in nuxt

[Nuxt] ルートの設定・自動設定されるルーティングを確認する方法

   Published Date: 2020年5月20日

NuxtのルーティングはVue Routerがベースとなっています。ドメインルートにアクセスした時に、表示されるページはどこで設定されているのかを確認してみます。同じ場所に、今後作成していくページのルーティング情報も記載されるようになります。

ルート設定はNuxtプロジェクトルートの「.nuxt」というディレクトリの中の、「router.js」で設定されています。

ソースを見てみましょう。

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 を指定しています。

ルーティングが自動設定される仕組みは、

$ npm run dev

でコンパイルされると

「.nuxt」ディレクトリの「router.js」に自動にルーティング情報が設定される



Author: webmaster