Nuxt3 Custom Routing
NuxtHi, I’m Lovefield.
Nowadays, most URL configurations can be configured using a folder structure. However, there has always been a limit to constructing URLs using folder structures in practice, where variables exist. This is because there are ambiguous things to create as a folder structure due to the nature of URL organization such as Pagination. In this article, I would like to briefly describe how to create a custom router in Nuxt3.
There are two main ways to set up a custom router. The first is to use the router
option for nuxt.config.ts
, and the second is to create the app/router.option.ts
file. Personally, I prefer the second method. The first method is that there is more information to declare to the router than you think, and the code becomes messy because 'nuxt.config.ts' becomes complicated. Let's move on to the second method.
First create an app/router.option.ts
file.
import type { RouterConfig } from '@nuxt/schema'
export default <RouterConfig> {
}
Basic file structure. You must get the type RouterConfig from @nuxt/shema
. It also uses the method of handing over the configuration object to export default. When you create a file, Nuxt3 will automatically read it. The keys hashMode
, history
, and routes
exist on this object. Among them, the key we need to use is routes
.
The routes
key is functional and must be written as follows.
import type { RouterConfig } from '@nuxt/schema'
export default <RouterConfig> {
routes: (_routes)=>{
}
}
The _routes
received as a factor are read-only and cannot be modified. _routes
contains router values created in a folder structure in a RouteRecordRaw-type array. The return value must also return the RouteRecordRaw array. In other words, you just need to deliver the same information as the information you created. Note that passing the structure you created with the return value will cause the information you had to disappear. You must combine the _routes
value with the information you want to set and pass it as a return value.
import type { RouterConfig } from '@nuxt/schema'
export default <RouterConfig> {
routes: (_routes)=>{
const routeList = [..._routes];
return routeList.concat([
]);
}
}
First, put the read-only state _routes
into the array using the spread syntax. Now use the concat
method in the array to configure the existing router list and the router options you want to add and forward them to the return value. The following values must be configured for the router options.
{
name: string;,
path: string;
component: Function / return vue file;
meta: pageMeta;
props: props;
}
name
: The unique name of the page. The names of pages created by the existing folder structure are automatically generated in the "folder name-file name" structure. For example, the router page name in the file auth/login.vue
consists of "auth-login". You can specify a separate name that does not overlap with the automatically generated unique name.
path
: The path to be set by the router. If you set the /community/[boardtype]/[page]
structure to the folder structure, write /community/:boardtype/:page
in path
.
component
: This is the most important part. You must specify a vue file. You can use the following. () => import(“@/pages/community/list.vue”)
meta
: It acts like definePageMeta
used on the page. Even if definePageMeta
is set in the vue file imported from the component
section, it does not apply.
props
: Specifies the value that defineprops
can receive on the page.
The final code is as follows:
import type { RouterConfig } from '@nuxt/schema'
export default <RouterConfig> {
routes: (_routes)=>{
const routeList = [..._routes];
return routeList.concat([
{
name: “community-list-page”,
path: “/community/:boardType/:page”,
component: ()=> import(“@/pages/community/list.vue”),
meta: {
layout: “community”,
middleware: [“pc-required”]
},
props: {
someValue: “value”
}
}
]);
}
}