Movatterモバイル変換

Adding custom routes

In Nuxt 3, your routing is defined by the structure of your files inside thepages directory. However, since it usesvue-router under the hood, Nuxt offers you several ways to add custom routes in your project.

Using router config

Usingrouter options, you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.

If it returnsnull orundefined, Nuxt will fall back to the default routes (useful to modify input array).

importtype {RouterConfig }from'@nuxt/schema'
// https://router.vuejs.org/api/interfaces/routeroptions.html
exportdefault <RouterConfig>{
routes: (_routes)=> [
    {
name:'home',
path:'/',
component: ()=>import('~/pages/home.vue').then(r=>r.default||r)
    }
  ],
}

Using thepages:extend hook

You can add, change or remove pages from the scanned routes with thepages:extend nuxt hook. For example, to prevent creating routes for any.ts files:

exportdefaultdefineNuxtConfig({
hooks: {
'pages:extend' (pages) {
// add a route
pages.push({
name:'profile',
path:'/profile',
file:'~/extra-pages/profile.vue'
      })
// remove routes
functionremovePagesMatching (pattern:RegExp,pages:NuxtPage[]= []) {
constpagesToRemove= []
for (constpageofpages) {
if (pattern.test(page.file)) {
pagesToRemove.push(page)
          }else {
removePagesMatching(pattern,page.children)
          }
        }
for (constpageofpagesToRemove) {
pages.splice(pages.indexOf(page),1)
        }
      }
removePagesMatching(/\.ts$/,pages)
    }
  }
})

Using a module

If you plan to add a whole set of pages related with a specific functionality, you might want to use aNuxt module.

TheNuxt kit provides a few waysto add routes:

• extendPages (callback: pages => void)
• extendRouteRules (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)

Router Options

It is possible to customizevue-router options.

Usingapp/router.options

It is possible to customizevue-router options.

This is the recommended way to specify router options.

importtype {RouterConfig }from'@nuxt/schema'
// https://router.vuejs.org/api/interfaces/routeroptions.html
exportdefault <RouterConfig>{
}

Usingnuxt.config

Note: Only JSON serializable options are configurable:

• linkActiveClass
• linkExactActiveClass
• end
• sensitive
• strict
• hashMode

exportdefaultdefineNuxtConfig({
router: {
// https://router.vuejs.org/api/interfaces/routeroptions.html
options: {}
  }
})

Hash Mode (SPA)

You can enable hash history in SPA mode. In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, theURL is never sent to the server andSSR is not supported.

exportdefaultdefineNuxtConfig({
ssr:false,
router: {
options: {
hashMode:true
    }
  }
})

Custom History (advanced)

You can optionally override history mode using a function that accepts the base URL and returns the history mode. If it returnsnull orundefined, Nuxt will fallback to the default history.

importtype {RouterConfig }from'@nuxt/schema'
import {createMemoryHistory }from'vue-router'
// https://router.vuejs.org/api/interfaces/routeroptions.html
exportdefault <RouterConfig>{
history:base=>process.client?createMemoryHistory(base):null/* default */
}